webpack 笔记
--config
npx webpack --config webpack.config.js
If a webpack.config.js is present, the webpack command picks it up by default. We use the --config option here only to show that you can pass a config of any name. This will be useful for more complex configurations that need to be split into multiple files.
https://webpack.js.org/guides/getting-started/
resolve.alias
resolve.alias 配置项通过别名来把原来导入路径映射成一个新的导入路径
// webpack.config.js
module.exports = {
resolve: {
alias: {
components: './src/components'
}
}
}
import Button from 'components/button'
实际上会被 alias 等价替换成
import Button from './src/components/button'
以上 alias 配置的含义是把导入语句里的 components 关键字替换成 ./src/components
这样做可能会命中太多的导入语句，alias 还支持 $ 符号来缩小范围只命中以关键字 结尾 的导入语句
// webpack.config.js
module.exports = {
resolve: {
alias: {
'vue$': '/path/to/vue.js'
}
}
}
这样 vue$ 只会命中以 vue 结尾的导入语句，
即只会把 import vue 中的关键字 vue 替换成
'/path/to/react.min.js'
https://segmentfault.com/a/1190000013176083?utm_source=tag-newest
resolve.extensions
在导入语句没带文件后缀时，webpack 会自动带上后缀去尝试访问文件是否存在。resolve.extensions 用于配置在尝试过程中用到的后缀列表。
// webpack.config.js
module.exports = {
resolve: {
extensions: ['.vue', '.js', '.json']
}
}
也就是说当遇到 require('./data') 这样的导入语句时，webpack 会先去寻找 ./data.js文件，如果找不到则去找 ./data.json 文件，如果还是找不到则会报错。
https://segmentfault.com/a/1190000013176083?utm_source=tag-newest
derServer.historyApiFallback
When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. devServer.historyApiFallback is disabled by default. Enable it by passing:
// webpack.config.js
module.exports = {
//...
devServer: {
historyApiFallback: true
}
};
image.png
image.png
https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback
watch
webpack-dev-server 和 webpack-dev-middleware 里 Watch 模式默认开启。
因此 dev 模式配置文件中，不需要额外写 watch: true
module.exports = {
// watch: true
}
https://www.webpackjs.com/configuration/watch/#watch
devServer.overlay
当有 编译错误 或者 警告 的时候显示一个全屏 overlay
devServer.overlay.gif
devServer.stats
stats: 'erros-only'
Only output when errors happen
image.png
未设置 devServer.stats
image.png
https://webpack.js.org/configuration/stats/#stats
devServer.port
指定端口
{
"name": "gdsp-pagination",
"description": "package vue components",
"version": "0.0.18",
"scripts": {
"dev": "cross-env NODE_ENV=development PORT=9000 webpack-dev-server --open"
}
}
module.exports = {
devServer: {
port: process.env.PORT // 9000
}
Project is running at http://localhost:9000/
https://webpack.js.org/configuration/dev-server/#devserver
devtool
生成 sorce-map
// webpack.config.js
module.exports = {
devtool: '#eval-source-map' // # 可省略
}
image.png
webpack-devtool-eval-source-map.gif
https://webpack.js.org/configuration/devtool/
https://bendyworks.com/blog/getting-started-with-webpack-source-maps
devServer.noInfo
Tells dev-server to supress messages like the webpack bundle information. Errors and warnings will still be shown. devServer.noInfo is disabled by default.
值为 true 时，不提示打包信息，和 stats 属性有点像
module.exports = {
devServer: {
noInfo: true
}
}
image.png
https://webpack.js.org/configuration/dev-server/#devserver-noinfo-
performance.hints
Turns hints on/off. In addition, tells webpack to throw either an error or a warning when hints are found. This property is set to "warning" by default.
Given an asset is created that is over 250kb:
module.exports = {
//...
performance: {
hints: false
}
};
No hint warnings or errors are shown.
module.exports = {
//...
performance: {
hints: 'warning'
}
};
A warning will be displayed notifying you of a large asset. We recommend something like this for development environments.
image.png
module.exports = {
//...
performance: {
hints: 'error'
}
};
An error will be displayed notifying you of a large asset. We recommend using hints: "error" during production builds to help prevent deploying production bundles that are too large, impacting webpage performance.
image.png
module.exports = {
// performance: {
// hints: 'error'
// }
}
什么都不写的情况下不会报错
pagination 项目 webpack.prod.config.js 中之所以写，
performance: false 是因为不想出现资源过大的错误的提示
https://webpack.js.org/configuration/performance/#performance-hints
output.libraryTarget
需要配合 output.library 一起使用
libraryTarget: "var"- (default)
使用这个配置，当库被加载时，那么库的返回值会被分配到使用用 var 申明的变量上。
var myDemo = _entry_return_;
// In a separate script...
myDemo();
libraryTarget: "assign"
使用这个设置，会把库返回值分配给一个没使用 var 申明的变量中，如果这个变量没有在引入作用域中提前申明过，那么将会挂载在全局作用域中。（注意，这个行为有可能会覆盖全局作用域中的已有变量）
myDemo = _entry_return_;
libraryTarget: 'umd' ☆
这个选项会尝试把库暴露给前使用的模块定义系统，这使其和 CommonJS 、AMD 兼容或者暴露为全局变量
// webpack.config.js
module.exports = {
output: {
library: 'iview',
libraryTarget: 'umd' // 支持 import、require 等的形式导入
}
}
// main.js
import iview from 'iview'
const iview = require('iview')
libraryTarget: 'amd'
这个选项会把库作为 AMD 模块导出
// webpack.config.js
module.exports = {
output: {
library: 'iview',
libraryTarget: 'amd' // AMD
}
}
https://blog.csdn.net/frank_yll/article/details/78992778
https://webpack.js.org/configuration/output/#output-library
output.umdNamedDefine
When using libraryTarget: "umd", setting:
需要合着 libraryTarget 一起使用
// webpack.config.js
module.exports = {
//...
output: {
library: 'GDSPPagination',
libraryTarget: 'umd',
umdNamedDefine: true // 给 AMD 模块命名，否则匿名
}
};
will name the AMD module of the UMD build. Otherwise an anonymous define is used.
https://webpack.js.org/configuration/output/#output-umdnameddefine
https://blog.csdn.net/keliyxyz/article/details/51527476
externals
module.exports = {
externals: {
// 从输出的 bundle.js 中排除 vue
vue: {
root: 'Vue',
commonjs: 'vue',
commonjs2: 'vue',
amd: 'vue'
}
}
}
https://github.com/iview/iview/blob/2.0/build/webpack.dist.prod.config.js
https://webpack.docschina.org/configuration/externals/#externals
plugins
uglifyjs-webpack-plugin
parallel
Parallelization can speedup your build significantly and is therefore highly recommended.Parallelization can speedup your build significantly and is therefore highly recommended.
// webpack.config.js
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
parallel: true,
}),
],
},
};
