上一节简单介绍了webpack 打包js 以及html引用加载
本级简单介绍下webpack 的一些常用的自定义配置(后续会跟着需求在增加其它配置)及webpack.config.js(webpack默认配置名称，也可以在package.json中修改)的使用。
一、创建webpack.config.js文件
增加如下配置
let path = require('path') // node 模块
module.exports = {
mode: 'development', // 模式 默认两种模式 一种 production development
entry: './src/index.js', //入口
output: {
filename: 'index.js', // 默认是main.js 这里修改成index.js
path: path.resolve(__dirname,'dist') // 路径必须是一个绝对路径
}
}这里就说明下mode 模式的区别，其它属性感兴趣的自行修改尝试
那么先看下development 模式，执行npx webpack
在修改为production模式
对比发现很显而易见的发现index.js文件被压缩了！
二、创建自定义配置文件名称
上面我们创建了webpack.config.js ,有同学可能需要修改下这个名字，怎么处理呢？
现在修改webpack.config.js的名称为 webpack.config.custom.js。
有两只方式可以打包
- 执行命令 npx webpacj --config webpack.config.custom.js 打包
- 使用npm 配置文件定义脚本,修改下package.json 加入
"build": "webpack --config webpack.config.custom.js"
执行npm run build 即可！其它属性详见 www.npmjs.com/package/web…
三、使用 webpack-dev-server 插件打包
这个插件开启服务，将输出的js,html,css的文件至内存中，浏览器可以通过服务地址加载访问！
首先还是和下载webpack一样，在终端执行 npm i webpack-dev-server -D
下载插件。
然后，修改配置文件如下图,在工程目录执行webpack-dev-server --config webpack.config.custom.js
或者使用package.json 脚本命令 ，执行npm run dev
但是不管是哪种方式能找到index.js所在目录，但在浏览器访问 http://localhost:5555/
很显然dist输出目录，并没加载html也没有执行index.js文件。
四、wepack 配置插件打包html 到输出目录
这里我们使用 HtmlWebpackPlugin 插件 ,主要作用就是打包html到输出目录，本工程也就是dist目录
- 使用npm i html-webpack-plugin -D 进行下载。
- 在webpack 配置文件进行插件配置。
为了看输出目录内容，这里我们执行npm run build。因为npm run dev 输出在内存中并不能直观看出index.html已经输出。
当然执行npm run dev 访问浏览器也是正常显示的。我们还可配置html-webpack-plugin的其它属性详见 www.npmjs.com/package/htm…，一般压缩也就是如下配置。
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
minify: {
removeAttributeQuotes:true, // 删除引号
collapseWhitespace:true, // 去除空格
hash:true //哈希，解决缓存问题
}
})
]源码下载
创建文件夹,cd至已创建文件夹，执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_load_css。
进入工程目录，执行 npm install -D。
