Webpack4.x 升级
node 版本
C:\Users\XiGong>node -v
v10.2.0
package.json
"webpack": "^4.10.2",
"webpack-cli": "^2.1.4",
"webpack-dev-server": "^3.1.4",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.18.2",
"css-loader": "^0.28.7",
"mini-css-extract-plugin": "^0.4.1",
"url-loader": "^1.0.1",
"file-loader": "^1.1.11",
"copy-webpack-plugin": "^4.5.2",
设置mode
webacpack4分为production,development和none模式
为了区分三种模式
const ENV = process.env.NODE_ENV || 'development';
Webpack4.x升级1.jpg
我们可以使用cross-env来跨平台设置环境变量
cross-env NODE_ENV=production
image
target
告知 webpack 为目标(target)指定一个环境。
可以为string | function(compiler)
默认为web
context
基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader
const SOURCE_DIR = path.resolve(__dirname, 'src');
context: SOURCE_DIR
entry
如果传入一个字符串或字符串数组，chunk 会被命名为 main。如果传入一个对象，则每个键(key)会是 chunk 的名称，该值描述了 chunk 的入口起点。
单页
entry: {
client: './index.js',
}
多页
entry: {
home: "./home.js",
about: "./about.js",
contact: "./contact.js"
}
output
output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。
output.filename
此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。
output.path
output 目录对应一个绝对路径
const pkg = require('./package.json');
const OUTPUT_DIR = path.resolve(__dirname, 'build');
const CLIENT_DIR = path.join(OUTPUT_DIR, VERSION);
library和libraryTarget的使用
有时我们想开发一个库，如lodash，underscore这些工具库，这些库既可以用commonjs和amd方式使用也可以用script方式引入。
这时候我们需要借助library和libraryTarget，我们只需要用ES6来编写代码，编译成通用的UMD就交给webpack了。
output: {
path: CLIENT_DIR,
filename: 'assets/[name].[hash:8].js',
libraryTarget: 'umd',
}
optimization
在webpack 3 版本中我们使用CommonsChunkPlugin
CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长。
但是在webpack4中我们使用optimization.splitChunks和optimization.runtimeChunk来代替
cacheGroups 自定义配置主要使用它来决定生成的文件
splitChunks.chunks
表明哪一块需要被优化. 如果是all的话就可以同时优化异步和同步的。
通过这一段解释我们知道官方推荐设置为
chunks: 'all'
splitChunks name
split chunk的名字. 如果提供为true的话会自动生成一个name based on chunks and cache group key.如果是字符串或方法的话会允许你customize name。如果name与entry pont的匹配，entry point 就会被removed.
可以自定义也可以直接设为true
splitChunks.cacheGroups
Cache groups 可以继承和覆盖从 splitChunks.* 除了 test, priority 和 reuseExistingChunk 只能在 cache group level 配置. 如果要取消一些 default cache groups那就把它们设置为false.
就是说所有的属性都可以写在cacheGroups里面
splitChunks.cacheGroups.test
控制哪一个module会被选择在这个cache group. 省略他选择的所有modules.它可以匹配准确的module path 和 chunk name。当chunk name匹配上的时候所有的module都会被选择。
module
module.rules
array
创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
Rule.use
应用于模块的 UseEntries 列表。每个入口(entry)指定使用一个 loader。
传递字符串（如：use: [ "style-loader" ]）是 loader 属性的简写方式（如：use: [ { loader: "style-loader "} ]）。
{ test: Condition }：匹配特定条件。一般是提供一个正则表达式或正则表达式的数组，但这不是强制的。
{ include: Condition }：匹配特定条件。一般是提供一个字符串或者字符串数组，但这不是强制的。
{ exclude: Condition }：排除特定条件。一般是提供一个字符串或字符串数组，但这不是强制的。
{ and: [Condition] }：必须匹配数组中的所有条件
{ or: [Condition] }：匹配数组中任何一个条件
{ not: [Condition] }：必须排除这个条件
使用 html-webpack-plugin
可以自动生成html模板
plugins: [
new HtmlWebpackPlugin({
title: 'React App',
filename: './index.html',
template: './index.ejs',
}),
],
使用mini-css-extract-plugin
webpack4得使用mini-css-extract-plugin这个插件来单独打包css
为了打通基于 webpack 的整体项目编译流程，我们也需要在 webpack 中合理地配置 CSS 的编译方式，使得 Sass（Less）、CSS 及 webpack 可以无缝衔接。
plugins: [
new MiniCssExtractPlugin({
filename: 'assets/css/style.[hash:8].css',
chunkFilename: 'assets/css/[id].[hash:8].css',
})
]
使用CopyWebpackPlugin
在webpack中拷贝文件和文件夹
new CopyWebpackPlugin([
{ from: 'favicon.ico' },
]),
devtool
此选项控制是否生成，以及如何生成 source map
scripts配置
根据webpack.config.js文件打包
webpack – for building once for development
webpack -p – for building once for production (minification)
webpack --watch – for continuous incremental build
webpack -d – to include source maps
webpack --colors – for making things pretty
–progress 显示打包进度
–colors配置打包输出颜色显示
–hot热加载，代码修改完后自动刷新
–inline 是刷新后的代码自动注入到打包后的文件中(当源文件改变时会自动刷新页面)
-d 是debug模式，输入一个source-map，并且可以看到每一个打包的文件
-p 是对代码进行压缩
Webpack-dev-server,一个轻量的node.js
express服务器打包并且在服务器上运行，会生成在内存当中
webpack-dev-server
网友评论