Open wuqiong7 opened 5 years ago
注意:前边是可用的全局变量的名称,后边是NPM包名称
new Webpack.ProvidePlugin({
'_': 'lodash',
'lodash': 'lodash',
'$': 'jquery',
'jQuery': 'jquery',
})
经测下边这样的写法也好使,但还是推荐规范写法。
new Webpack.ProvidePlugin({
'_': 'lodash',
'lodash': '_',
})
最大的两个亮点
若只是跑个Hello world的App,那确实webpack.config.js会简但很多。
entry和output都有默认值,
配置mode(webpack4新增,可选值:production / development / none),
加个js loader,配置下devServer就可以跑起来了
各mode配置下的defalut
production模式defalut配置/插件
development模式defalut配置配置/插件
Plugins
noEmitOnErrors
告诉reloader在出现错误时不要重载,适合在生产环境
concatenateModules
作用域提升 webpack3的scope hosting
??? 这里有个相关mainFields配置阅读,反正我是没理解
namedModules
在热加载时直接返回更新文件名,而不是文件的id。 log日志对比:
webpack.DefinePlugin
定义全局变量,最常用是用来处理我们开发环境和生产环境的不同
mini-css-extract-plugin
原来用于js css分离的extract-text-webpack-plugin 不支持webpack4, 所以改用mini-css-extract-plugin
目前不支持HMR
公用代码抽取
具体可参阅提取公共代码与第三方代码
OptimizeCssAssetsPlugin
用于优化css文件
暴露全局变量
resolve解析
extensions: 指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
清空dist
一些CHANGELOG
新增了
sideEffects
特性,关于sideEffects
的解释这里说的很是清楚 戳这里删除了 CommonsChunkPlugin,取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk,这提供了细粒度的缓存策略控制
亲测未果 不仅支持本地处理 JSON,还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时,webpack 会消除掉JSON Module 中未使用的导出。
extensions
第一个字符是''会包错
LOG
参阅文档