webpack4一些设置

一.sourceMap: 是一个映射关系,如果出错可以知道实际文件行数出错

在webpack.config.js设置属性

devtool: 'source-map'

在生产环境可以设置为(提醒错误比较全面)

devtool: 'cheap-module-eval-source-map'

在线上环境设置为(比较合适)

devtool: 'cheap-module-source-map'

https://segmentfault.com/a/1190000008315937
https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
https://www.youtube.com/watch?v=NkVes0UMe9Y

二.@babel 将ES6自动转为ES5,还可设置自动加载ES6函数

三.Tree Shaking: 根据引用的内容自动选择加载内容但因为是静态引入方式,所以功能只支持ES module,不支持COMMON JS

线上和线下模式打包引入结果不一样,线下模式会全部引入,但是在线上模式只会引入需要的模块.,就是判断只要引入一个模块,就会采用Tree Shaking方式进行打包

在package.json文件中

"sideEffects": ["@babel/polyfill"],  如果有需要特殊处理的模块,比如会忽略对 @babel/polyfill的处理

"sideEffects": false,   如果没有特殊处理的模块,就可以设为false

在webpack.config.js中

optimization: {
    usedExports: true
}

四.Code Spliting

4.1t同步代码:

在配置文件webpack.config.js中

optimization: {
        splitChunks: {
            chunks: 'all'
        }
 }

4.2异步代码,会自动进行代码分割

首先安装插件 npm install --save-dev @babel/plugin-syntax-dynamic-import

在 .babelrc 中配置plugins加入

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

4.3 SplitChunksPlugin配置

https://webpack.js.org/plugins/split-chunks-plugin/

五.Bundle Analysis 分析工具

https://webpack.js.org/guides/code-splitting/#bundle-analysis

可视化较强的是webpack-bundle-analyzer

六.懒加载

https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules

七.CSS打包 MiniCssExtractPlugin

　 CSS合并和压缩: optimize-css-assets-webpack-plugin

PS:因为不支持HMR,所以只在production模式下使用这个CSS打包压缩功能

八.去除一些性能提醒

在webpack.config.js中添加属性

performance: false,

九.浏览器缓存caching

在配置文件output的打包目录的文件命名上加上 [contenthash] , 会根据文件内容进行hash

十.(在plugins中加入配置)自动引入模块 ProvidePlugin (因为在webpack中模块之间是隔离的)这样可以全局引入

new webpack.ProvidePlugin({
  $: 'jquery',
  // ...
});

十一.将模块js文件中的this指向window

需要先安装imports-loader

在webpack.config.js中加入代码

module: {
    rules: [
    { 
        test: /.js$/, 
        exclude: /node_modules/,
        use: [
            {
                loader: "babel-loader",
            }, {
                loader: "imports-loader?this=>window"
            }
        ]
    }
}

十二.全局变量

在package.json文件中可以设置env全局变量,这样可以直接访问webpack.common.js这一个配置文件中而实现线上和线下模式

    "dev-build": "webpack --config ./build/webpack.common.js",
    "dev": "webpack-dev-server --config ./build/webpack.common.js",
    "build": "webpack --env.production --config ./build/webpack.common.js"