webpack笔记

什么是webpack
[webpack 3.12 常用命令（依赖环境：nodejs16+）](#webpack 3.12 常用命令（依赖环境：nodejs16+）)
[webpack 5 常用命令（依赖环境：nodejs16+，webpack@5.72.0，webpack-cli@4.9.2）](#webpack 5 常用命令（依赖环境：nodejs16+，webpack@5.72.0，webpack-cli@4.9.2）)

什么是webpack

webpack是一个前端资源加载/打包工具，它将根据模块之间的依赖关系进行静态分析，然后将这些模块根据指定规则生成静态资源。比如将常规的浏览器能够识别的静态资源类文件（html、js、css、jpg等）、以及浏览器本身不能识别的文件（模板文件hbs文件、CommonJS的cjs文件、样式文件sass、less文件），转换并打包成几个独立的浏览器能正常识别的静态文件，并且能够减少浏览器访问网站时的请求次数。

webpack 3.12 常用命令（依赖环境：nodejs16+）

不写配置文件，在打包命令后指定参数：webpack runoob1.js bundle.js

使用第三方loader进行打包
webpack本身只支持对js进行打包，如果需要打包其他类型的文件比如css文件，需要引入第三方loader。以下以css-loader、style-loader打包css文件为例子进行说明

先安装loader

npm install css-loader@0.28.11 style-loader@0.23.1

在被依赖的静态文件内部引入第三方模块

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
打包的时候手动指定第三方模块（该方法只兼容webpack1.x和2.x版本）

--module-bind 'css=style-loader!css-loader'

在webpack配置文件中指定编译选项

module.exports = {
...
module: {
loaders: [
{
test: /.css$/,
loader: "style-loader!css-loader"
}
]
}
}

通过配置文件进行打包
webpack.config.js

module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /.css$/,
loader: "style-loader!css-loader"
}
]
}
}

配置完毕之后，执行打包命令：webpack

使用插件进行打包
插件用于完成一些 loader 不能完成的工作。
以webpack内置的 BannerPlugin 插件为例子，该插件用于在打包后的文件头部输出一些注释信息。
在webpack.config.js里添加插件信息

var webpack=require('webpack');

module.exports = {
...
plugins:[
new webpack.BannerPlugin('菜鸟教程 webpack 实例')
]
}

添加完成后，再执行webpack命令，打包后的bundle.js文件头部会多出一段注释信息

打包时让输出进度、输出内容带有颜色：webpack --colors --progress

热部署（修改后不用重新编译，刷新页面即可看到最新内容）：webpack --progress --colors --watch

热部署+免刷新页面：webpack-dev-server，兼容webpack3的webpack-dev-server版本号：2.11.5

webpack 5 常用命令（依赖环境：nodejs16+，webpack@5.72.0，webpack-cli@4.9.2）

不写配置文件，在打包命令后指定参数：webpack ./src/main.js --mode=development