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
。同理,默认的输出output
s 是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.js
output
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
。