最近有些无聊想再学习一下webpack，就专门自己整了一下，特此记录，以后可能会继续补充！
1、安装webpack
mkdir webpack-try
cd webpack-try
npm init -y
npm install webpack webpack-cli --save-dev
再在 package.json,同级的目录下创建index.html、src目录（在src内部创建index.js）和webpack.config.js文件,在webpack配置文件写入如下代码，想了解更多请看官方文档。
const path = require('path');
module.exports = {
entry: './src/index.js', //开始应用程序打包过程的一个或多个起点
output: {
filename: 'main.js', //此选项决定了每个输出 bundle 的名称
path: path.resolve(__dirname, 'dist'),//output 目录对应一个绝对路径。
},
mode: 'development' //开发环境
//mode: 'production' //生产环境
};
2、devServe
webpack-dev-server 为你提供了一个基本的 web server，并且可以实时重新加载，命令如下：
npm install --save-dev webpack-dev-serve
安装后在webpack文件 module.exports的对象中添加（注意不是其他位置哈）如下代码：
devServer: {
static: './dist',
},
以上配置将 dist 目录下的文件 serve 到 localhost:8080 下，当然也可以自己设置端口号：port: 3000, //端口号
最后在package.json文件中，添加如下scripts:
"start": "webpack-dev-server --open",
3、打包html文件
html-webpack-plugin 插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
npm install --save-dev html-webpack-plugin
在webpack配置文件中引入如下代码， const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
// 以当前文件为模板创建新的html(1. 结构和原来一样 2. 会自动引入打包的资源)
template: './src/index.html',
}),
]
注意：不要在模板html中引入任何js和css文件
4、打包less和css
由于less和css，webpack无法解析，所以必须得借助loader，
npm install --save-dev css-loader
npm install --save-dev less-loader
npm install --save-dev style-loader
在webpack配置文件中引入如下代码，
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [
'style-loader', //创建style标签，将js中的样式资源插入进行，添加到head中生效
'css-loader', //将css文件变成commonjs模块加载js中，里面内容是样式字符串
'less-loader' //将less文件编译成css文件
]
}
]
}
5、打包图片文件
图片文件webpack不会被解析,可以采用file-loader或者和url-loader
npm install url-loader -D
在webpack.config.js中的module的rules:添加如下代码：
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader', //url-loader是对file-loader的上层封装
options: {
limit: 8 * 1024, //临界值为8KB，小于8KB的图片会被转为base64编码
name: '[hash:10].[ext]', //加工后图片的名字
outputPath: 'imgs' //输出路径
}
},
6、打包html中的图片
注意事项：不能同时使用url-loader（file-loader）和html-loader否则会产生冲突,链接在此
npm install html-loader -D
在webpack.config.js中的module的rules:添加如下代码：
{
test: /\.html$/i,
use: [
{
loader: "html-loader",
}
],
},
7、将css提取为单独的文件
注意事项此:此插件不能与style-loader同时使用，此插件是将所有的样式整合成一个css文件，然后放到html中
npm install mini-css-extract-plugin -D
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',//contenthash是用来搞缓存的
})
],
还要将有关css,less等样式相关的rules进行修改，确保没有style-loader，否则会引发错误。
简单总结：
- 常用loader :
less-loader ：将less转换为css
css-loader ：将css转为js字符串
style-loader ：创建style将js中的样式资源插入其中，再添加到head内
file-loader ：用于处理文件类型资源，jps,png等
url-loader ：它是file-loader的升级版本，可以对图片进行更加深入的处理 - 常用plugin :
HtmlWebpackPlugin ：指定模板，自动创建文件后，引入外部资源
MiniCssExtractPlugin ：将项目中的css文件整合成一个css文件
