Webpack概念
webpack概念
我经常用 webpack，打算做一次比较详细的概念清点和梳理。从 0 配置 webpack，由于 webpack5（2019.07.27）暂时还没有发布。并且从Webpack Milestones上来看，截止到 7 月 27 日，完成度是 64%。有喜欢钻研的同学可以去研究一下 5，我的重点还是当前 4.X。
Hello World
由于是概念清点，先从最基础的开始。
mkdir webpack-test
cd webpack-test
npm init -y
npm i --save-dev webpack接下来，新建一个src目录，创建index.js，然后在package.json的scripts下加入
"scripts": {
"webpack": "webpack"
}接着在当前目录启动终端，输入
npm run webpack这个时候就能看到webpack把src入口的index.js打包到dist目录下的main.js。
由于parcle宣传约定先于配置的火爆，webpack在 4.X 中也加入了默认配置，即如果没有webpack.config.js或者没有配置入口entry，则默认为src/index.js。同理，默认的输出outputs 是dist/main.js。
核心概念
webpack有五个概念需要了解。
entry
entry用来告诉webpack应该从哪个 JS 文件开始去寻找相关依赖，并且把它们打包成一个或者多个 bundle，最终输出到指定目录。默认值为./src/index.js，可以有多个 entry。常用的配置如下：
// 单文件
module.exports = {
entry: "./src/file1.js"
};
// 单文件数组，不常用，默认打到一个文件中
module.exports = {
entry: ["./src/file1.js", "./src/file2.js"]
};
// 将输出
// dist
// └── main.js
// 多文件对象，常用，会分entry入口打包，输出文件名为entry配置的key
module.exports = {
entry: {
file1: "./src/file1.js",
file22: "./src/file2.js"
}
};
// 将输出
// dist
// ├── file1.js
// └── file22.jsoutput
output就是用来指定把 bundle 输出到哪里的配置，默认值为./dist。output有两个配置项：
- filename
filename 用于配置输出文件的文件名 - path
输出文件的绝对路径
// 默认配置
const path = require("path");
module.exports = {
output: {
filename: "main.js",
path: path.join(__dirname, "dist")
}
};如果有多个入口，则可以使用占位符来指定文件名，或者添加 hash 等。
module.exports = {
output: {
filename: "[name].[hash:16].js",
path: path.join(__dirname, "dist")
}
};loader
loader主要用来预处理各种文件。比如我们常用的babel-loader，css-loader。
在使用之前，需要先安装
npm install --save-dev css-loader style-loader
npm install --save-dev babel-loader @babel/core @babel/preset-env为文件加入loader配置
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
}
};plugin
插件机制给webpack提供了更多自定义的能力。webpack的plugin具有apply方法，并且会在webpack编译时调用，通过在plugin对象中对webpack提供的各种hook做操作，达到我们修改bundle的目的。
官网的一个例子：
const pluginName = "ConsoleLogOnBuildWebpackPlugin";
class ConsoleLogOnBuildWebpackPlugin {
apply(compiler) {
compiler.hooks.run.tap(pluginName, compilation => {
console.log("webpack 构建过程开始！");
});
}
}mode
mode比较简单，通常来说，有两种内置mode，development和production，可以通过webpack.config.js配置，或者通过CLI参数传递。
module.exports = {
mode: "production"
};webpack --mode=production设置了mode之后，nodejs进程中的process.env.NODE_ENV也会被同步设置。webpack对于mode有一些自己的区分，在production模式下，会打开代码压缩、去除一些热更新的代码等，在生产环境中切记要将mode设置为production。