使用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来做东西的
希望能帮到你们！！！