使用webpack搭建vue框架
webpack是什么
webpack：是一种静态资源构建，打包的工具
当然还有一些其他的比如：
grunt：https://www.gruntjs.net/
gulp：https://www.gulpjs.com.cn/
fis3(百度)：http://fis.baidu.com/
webpack：https://webpack.js.org/
webpack核心
- entry:入口
- output:出口
- loader:资源转换器
- plugin:插件
- mode:模式
下面开始了，看好咯
一：创建一个项目目录 webpack_we (随便起的)
二：创建一个package.json文件
三：安装webpack
npm install webpack webpack-cli --save-dev
四：在项目根目录下创建src文件夹，里面创建main.js文件
五：在运行之前，要先把启动名称改一下
之后使用
npm run build
它会自动给我们构建一个dist文件夹
webpack默认是零配置
默认的入口文件：src/main.js （我们之前创建的src）
默认的出口文件：dist/main.js （上图中的dist）
六：我们要手动配置的话，要创建webpack配置文件，来执行
默认webpack配置文件：webpack.config.js
如果运行指定的配置文件，而不是默认的webpack.config.js，则在通过scripts运行时添加–config
在我们使用npm run build之后会出现黄色警告
解决方法就是：在配置文件中配置mode
或者production
如何自动清理打包的垃圾文件
1、npm install --save-dev clean-webpack-plugin
2、 在webpack.config.js中引入
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);
3、通过plugins实例化
如何实现自动构建的文件自动的注入index.html
我们一般都会去手动添加js文件，比如引入外部js文件，但在webpack中不需要手动，只需下载插件就可以
npm install html-webpack-plugin
同样也要在配置文件中引入
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
添加到plugins中
接下来要配置我们的webpack环境
1、npm install webpack-dev-server -D
2、通过devServer来配置:port,baseContent
注意：在改动配置文件之后，要重新 npm run build
在webpack中使用css、less、sass它识别不了，webpack默认识别的文件：.js,.json文件格式，我们可以安装插件来使用
webpack识别less：
npm install less less-loader -D
webpack识别css：
npm install --save-dev style-loader css-loader
webpack识别sass：
npm install --save-dev sass-loader
npm install --save-dev node-sass
在配置文件中引入
接下来就要集成vue了
安装ES6的包：babel
1、npm install --save-dev babel-loader @babel/core @babel/preset-env
2、去配置文件中 module------>rules加入：
{ test: /.js$/, exclude: /node_modules/, loader: “babel-loader” },
3、在项目根目录下创建.babelrc配置文件
4、在.babelrc中写入：
{
“presets”: ["@babel/preset-env"]
}
安装vue包：
npm install vue vue-loader vue vue-template-compiler -D
安装之后还要配置vue插件并在plugin中实例化插件
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);
plugins: [
//实例化vue插件
new VueLoaderPlugin()
],
包括在 module------>rules加入：
{test:/.vue$/,loader:‘vue-loader’}
在main.js中：
index.html中：
这都是自己搭建的，当然还有目录：
是不是跟vue脚手架里的目录是一样的，在src目录中有App、main.js文件，还有router路由和Component包括vuex,这些在下面会说的
如何集成vue路由？
1、npm install vue-router -S
2、在src下创建router文件夹，里面是index.js文件，跟vue是一样的
3、在index.js文件里如下：
跟vue是一样的，之后还要在main.js里面导入router，就不细说了，会vue的都明白
到这里就差不多了，还有一些其他东西不影响我们使用webpack搭建vue来做东西的
希望能帮到你们！！！