官网

https://webpack.docschina.org/

  1. npm install webpack-cli -D
  1. vue run dev

1.安装

image.png

2.webpack项目配置文件解析

（1）入口（entry）

入口起点指示webpack应该使用哪个模块，来作为构建起内部依赖图开始。
例：
module.exports = {
entry: ‘./path/to/my/entry/file.js’

  1.             //entry:{<br />//        myentry1:"./src/js/bar.js",<br />//        myentry2:"./src/js/barTest.js",<br />//}<br />};

（2）输出（output）

output属性告诉webpack在哪里输出path以及如何命名filename，默认为dist。
例：
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘my-first-webpack.bundle.js’//单入口对应的单出口
//filename:”[name].js”//多入口对应的多出口
}

（3）加载器（loader）

loader让webpack能够去处理那些非JavaScript文件。
例：
module: {
rules: [
{test: /.txt$/, use: ‘raw-loader’ },
{test: /.css$/, use: [‘style-loader’, ‘css-loader’]}
]
}

（4）插件（plugins）

相对于loader来说插件可以用于执行范围更广的任务。
例：
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: ‘./src/index.html’})
]

（5）加载器和插件的使用步骤：

①npm/cnpm安装
②插件需要require引入并添加到plugins数组中
③加载器在安装插件之后添加到rules数组里面，loader能够import导入其他类型模块

3.开发环境

（1）使用观察模式

在package.json里面配置：”watch”: “webpack —watch”，然后npm run watch，使用观察模式可以重新编译代码，而不用手动 构建整个项目。

（2）使用webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
步骤：
①cnpm安装
②修改配置文件让webpack-dev-server 找到在哪里查找文件
③在package.json文件中加入配置：
“dev”: “webpack-dev-server —open —inline —progress —config webpack.config.js”,
“start”: “npm run dev”
④在命令行输入npm run start开启