webpack基本配置四_webpack4 core-js object.fromentries

webpack关于js的配置

1.js语法检查eslint

语法检查eslint 所以使用eslint-load和eslint的库,eslint只检查自己写的源代码，第三方库是不用检查的

但是还是要自己设置检查规则为了airbnb 所以需要 eslint-config-airbnb-base, eslint eslint-plugin-import
所以需要下载npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
配置：在package.json中eslintConfig中设置

"eslintConfig":{
    "extends":"airbnb-base"
  }
1
2
3

在webpack.config.js中配置如下

 // eslint
                {
                    test:/\.js$/,
                    exclude:/node_modules/,
                    loader:'eslint-loader',
                    options:{
                        // 自动修复
                        fix:true
                    }
                },
1
2
3
4
5
6
7
8
9
10

然后在引入eslint之后，就会惨状飘红一片.啊啊啊啊
所以将eslint中自动修复改为fix:true
eslint-disable-next-line 下一行eslint规则都会失效（下一行不进行eslint检查)

2.js兼容性处理babel

1.基本js兼容性处理，使用babel 可以将es6的语法降级
npm i babel-loader @babel/preset-env @babel/core
在webpack.config.js中配置如下

// babel
                {   
                    test:/\.js$/,
                    exclude:/node_modules/,
                    // js兼容性处理babel-loader 
                    loader:'babel-loader',
                    options:{
                        // 预设:指示babel做怎样的兼容性处理
                        presets:['@babel/preset-env']
                    }
                }
1
2
3
4
5
6
7
8
9
10
11

压缩打包如下
};\n\nconsole.log(add(2, 5));\nconsole.log(cheng(2, 3));
原代码
const cheng = (x, y) => x * y;
但是问题来了,只能转换基本语法,不能转化promise

2.全部js兼容性处理–>npm i @babel/polyfill
然后在使用index.js中，使用插件 import ‘@babel/polyfill’;
问题就是:我只解决部分兼容性问题，但是将所有兼容性代码全部引入,体积太大了~
3.需要做兼容性处理的就做:按需加载 --> corejs
npm i core-js
使用第三种方式的时候就需要将第二种的方式注释掉 import ‘@babel/polyfill’;
同时webpack.config.js配置文件如下

 {   
                    test:/\.js$/,
                    exclude:/node_modules/,
                    // js兼容性处理babel-loader 
                    loader:'babel-loader',
                    options:{
                        // 预设:指示babel做怎样的兼容性处理
                        presets:[
                            [
                                '@babel/preset-env',
                                {
                                    // 按需加载
                                    useBuiltIns:'usage',
                                    // 指定版本 core-js
                                    corejs:{
                                        version:3
                                    },
                                    // 指定兼容器做到哪个版本浏览器
                                    targets:{
                                        chrome:'60',
                                        firefox:'60',
                                        ie:'9',
                                        safari:'10',
                                        edge:'17'
                                    }
                                }
                            ]
                        ]
                    }
                }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

所以一般考虑第一种和第三种

3.压缩js和html

1.js的压缩
将mode变为production就会自动压缩
2.html的压缩
在plugins中原来的配置改变：

new HtmlWebpackPlugin({
                template: './src/index.html',
                minify:{
                    // 移除空格
                    collapseWhitespace:true,
                    // 移除注释
                    removeComments:true
                }
            }),
1
2
3
4
5
6
7
8
9

所有配置文件如下

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {
    resolve
} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { Template } = require('webpack');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 设置node.js环境变量
process.env.NODE_ENV = 'development';
module.exports = {
        entry: './src/js/index.js',
        output: {
            filename: 'js/built.js',
            // Node.js 中，__dirname 总是指向被执行 js 文件的绝对路径
            path: resolve(__dirname, 'build'),
            publicPath: './',
        },
        module: {
            rules: [{
                    test: /\.css$/,
                    use: [
                        {
                            loader:MiniCssExtractPlugin.loader,
                        }, 
                        'css-loader',
                        'postcss-loader',
                    ],
                },
                // eslint
                // {
                //     test:/\.js$/,
                //     exclude:/node_modules/,
                //     loader:'eslint-loader',
                //     options:{
                //         // 自动修复
                //         fix:true
                //     }
                // },
                // babel
                {   
                    test:/\.js$/,
                    exclude:/node_modules/,
                    // js兼容性处理babel-loader 
                    loader:'babel-loader',
                    options:{
                        // 预设:指示babel做怎样的兼容性处理
                        presets:[
                            [
                                '@babel/preset-env',
                                {
                                    // 按需加载
                                    useBuiltIns:'usage',
                                    // 指定版本 core-js
                                    corejs:{
                                        version:3
                                    },
                                    // 指定兼容器做到哪个版本浏览器
                                    targets:{
                                        chrome:'60',
                                        firefox:'60',
                                        ie:'9',
                                        safari:'10',
                                        edge:'17'
                                    }
                                }
                            ]
                        ]
                    }
                }
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/index.html',
                minify:{
                    // 移除空格
                    collapseWhitespace:true,
                    // 移除注释
                    removeComments:true
                }
            }),
            new MiniCssExtractPlugin(
                {   
                    // 打包好的输出的css
                    filename:'css/built.css'
                }
            ),
            // 压缩css
            new OptimizeCssAssetsWebpackPlugin()
            // new ExtractTextPlugin({
            //     filename: 'css/built.css',
            //     allChunks: true
            // })
        ],
        mode: 'development',
        devServer:{
            // 项目构建后的路径
            contentBase:resolve(__dirname,'js/built.js'),
            // 启动gzip压缩,使代码体积更小运行速度更快
            compress:true,
            // 端口号
            port:3000,
            // 自动打开浏览器
            open:true
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

4.生产环境基本配置

在一个文件中可能有多个loader处理，但是eslint-loader的处理顺序要更babel先执行才好
所以可以加载使用enforce:‘pre’

 {
                    test:/\.js$/,
                    exclude:/node_modules/,
                    enforce:'pre',
                    loader:'eslint-loader',
                    options:{
                        // 自动修复
                        fix:true
                    }
                },
1
2
3
4
5
6
7
8
9
10

其他配置如上
所以大家加油，我们下次继续