webpack-learning/webpack.config.js at master · Fengzhen8023/webpack-learning · GitHub

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
let TerserJSPlugin = require('terser-webpack-plugin');
let Webpack = require('webpack')

module.exports = {
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin(),
            new TerserJSPlugin
        ]
    },
    devServer: {
        port: 3000, // 指定开发服务器的端口号
        progress: true, // 显示开启本地服务器的进度
        contentBase: "./build", // 指定本地服务器默认打开的目录
        compress: true, // 是否对代码进行压缩
        before(app) {
            app.get('/time', (req, res) => {
                res.json({
                    currentTime: '8:00',
                    endTime: '10:00'
                });
            });
        }
    },
    resolve: {
        modules: [path.resolve("allen_modules"), path.resolve("node_modules")],
        extensions: [".css", ".js", ".json"],
        alias: {
            bootstrap: 'bootstrap/dist/css/bootstrap.css'
        },
        // mainFields: ["style", "main"],   // 应用场景不多
    },
    mode: "production", // 打包模式：有两种模式：development 和 production , 默认是 production 模式
    devtool: "eval-source-map",
    entry: "./src/index.js", // 打包的入口文件，默认是src目录下的index.js文件
    output: { // 配置文件默认是dist目录下的main.js文件
        filename: "Feng.js", // 出口文件的文件名
        path: path.resolve(__dirname, "build"), //出口文件的路径，注意一定要是绝对路径,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'css/main.css'
        }),
        new Webpack.BannerPlugin('Made by Allen Feng'),
        new Webpack.ProvidePlugin({
            $: 'jquery'
        }),
        new Webpack.DefinePlugin({
            DEV: JSON.stringify("dev"),
            FlAG: 'true',
            EXPRESSION: '1+1'
        })
    ],
    module: {
        noParse: /jQuery/,
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            },
            {
                test: require.resolve('jquery'), // 匹配到引入jquery的文件
                use: 'expose-loader?$' // 使用 expose-loader 进行处理
            },
            {
                test: /\.js$/, // 匹配 .js 文件
                use: {
                    loader: 'eslint-loader', // 使用这个loader对匹配到的文件进行处理
                    options: {
                        enforce: 'pre' // 将eslint-loader设置成前置loader，首先用这个loader处理文件
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env' // 预设，将ES6转成ES5
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties', // 将ES7语法中的class转成ES5
                            '@babel/plugin-transform-runtime' // 转换Generator、Promise等语法
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'),
                // exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'file-loader'
                }
            },
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            }
        ]
    }
}