虽然webpack4以后。webpack 可以不用再引入一个配置文件来打包项目，但还是梳理常用配置信息

/*
开发环境设置：能让代码运行
运行项目指令：
webpack 会将打包结果输出出去
npx webpack-dev-server 或者 npx webpack serve 只会在内存中编译打包，没有任何输出
/
/
webpack.config.js webpack的配置文件
作用：指示 webpack 做什么（当你运行webpack 指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs，而非ES6
【webpack.config.js 里默认采用commonjs】
/
//resolve用来拼接绝对路径的方法
const { resolve } = require(“path”);
// loader 1、下载 2、使用(配置loader)
// plugins 1、下载 2、引入 3、使用
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
//css文件提出出来。
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
//用于优化\最小化css 压缩css
// webpack 5版本之前 const OptimizeCssAssetsWebpackPlugin=require(‘optimize-css-assets-webpack-plugin’)
const CssMinimizerWebpackPlugin = require(‘css-minimizer-webpack-plugin’);
const ESLintPlugin = require(‘eslint-webpack-plugin’);
const path = require(“path”);
//设置nodejs环境变量
process.env.NODE_ENV = ‘development’;
//optimize-css-assets-webpack-plugin
module.exports = {
//webpack配置
//入口起点
entry: ‘./src/index.js’,
//输出
output: {
//输出文件名
filename: ‘js/bundel.js’,
//输出路径
//__dirname:nodejs的变量，代表当前文件的目录绝对路径
path: resolve(__dirname, ‘build’)
},
//loader的配置 loader 充当翻译
//不同文件必须配置不同loader处理，不能复用的
module: {
rules: [
// /
// 语法检查：eslint-loader eslint 只检查js格式
// 注意：只检查自己写的源代码，第三方的库是不用检查的
// 设置检查规则：
// package.json中eslintConfig中设置
// “eslintConfig”:{
// “extends”:“airbnb-base”

        //     }
        //     airbnb->eslint-config-airbnb-base eslint-plugin-import eslint
        //     //需要下载 npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import —D
        //     //eslint-loader  deprecated  弃用了。
        //               npm i eslint-webpack-plugin eslint eslint-config-airbnb-base eslint-plugin-import —D 
        //     //如果让js代码中的某个语句不受eslint限制
        //     //下一行eslint 所有规则都失效（下一行不进行eslint检查）
        //     //eslint-disable-next-line
        //     //xxxxxx;
        //  */
        // {
        //     test: /.js$/,
        //     exclude: /node=modules/,
        //     loader: 'eslint-loader',
        //     options: {
        //         //自动修复eslint的错误
        //         fix: true
        //     }

        // },
        //详细loader配置          
        {
            // 利用RegExp 匹配哪些文件
            test: /\.css$/,
            //使用哪些loader进行处理
            use: [
                //use 数组中loader执行顺序：从右到左，从下到上依次执行
                //创建style 标签，将js中的样式资源插入进行，添加到head中生效
                //'style-loader',
                //  1、下载 mini-css-extract-plugin  2、引入  3、使用
                MiniCssExtractPlugin.loader,
                //将css文件变成commonjs模块加载js中，里面内容是样式字符串
                'css-loader',
                /*
                //下载 postcss-loader postcss-preset-env
                css兼容性处理：postcss-->post-loader postcss-preset-env
                 */
                //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定
                //指定的css兼容性样式
                // "browserslist":{
                //     开发环境--->//设置nodejs环境变量 process.env.NODE_ENV='development';
                //     "development":[
                //       "last 1 chrome version",
                //       "last 1 firefox version",
                //       "last 1 safari version"
                //     ],
                //      生产环境：默认是看生产环境
                //     "production":[
                //       ">0.2%",
                //       "not dead",
                //       "not op_mini all"
                //     ]
                //   }
                //使用loader的默认配置                   
                //'postcss-loader',
                //修改loader的配置
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: () => {
                            //postcss的插件
                            require('postcss-preset-env')()
                        }
                    }
                }
            ]
        },
        {
            // 利用RegExp 匹配哪些文件
            test: /\.less$/,
            //需要使用多个loader处理用use
            use: [
                //use 数组中loader执行顺序：从右到左，从下到上依次执行
                //创建style 标签，将js中的样式资源插入进行，添加到head中生效
                'style-loader',
                //将css文件变成commonjs模块加载js中，里面内容是样式字符串
                'css-loader',
                //将less文件编译成css文件，
                //需要下载less-loader和less
                'less-loader'
            ]
        },
        {
            //处理图片资源  默认处理不了html中img图片
            test: /\.(jpg|png|gif)$/,
            //使用一个loader
            //下载url-loader file-loader    【url-loader 依赖file-loader】
            loader: 'url-loader',
            options: {
                //图片大小小于8kb，就会被base64处理
                //优点：减少请求数量（减轻服务器压力）
                //缺点：图片体积会更大（文件请求速度变更）
                limit: 8 * 1024,
                /*
                这是因为webpack先用css-loader将url(../resource/1.png)
                解析为url(require('./resource/1.png'))
                最后url-loader遇到后才能进行处理，但是url-loader默认用es6的模块语法
                进行解析，如果没有设置esModule为false 那么将出现下面这种情况
                */
                //问题：因为url-loader 默认使用ES6模块化解析，而html-loader引入图片是commonjs
                // 解析时会出问题：【object Module】
                //解决：关闭url-loader的es6模块化，使用commonjs解析
                esModule: false,
                //给图片进行重命名
                //[hash:10]取图片hash的前10位
                //[ext]取文件原来扩展名
                name: '[hash:10].[ext]',
                //打包存放的文件夹
                outputPath: 'imgs'
            },
            //webpack打包生成多余图片的解决方案
            type: 'javascript/auto'
        },
        //处理html文件中的img图片(负责引入img，从而能被url-loader进行处理)
        {
            test: /\.html$/,
            //下载html-loader
            loader: 'html-loader'
        },
        {
            //打包其他资源（除了html、js、css、less等资源之外的资源）
            exclude: /\.(css|less|js|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
                name: '[hash:10].[ext]',
                //打包存放的文件夹
                outputPath: 'media'
            }
        }
    ]
},
//插件配置   
plugins: [
    //plugins的配置
    //html-webpack-plugin  1、下载  2、引入  3、使用
    //功能：默认会创建一个空的html，自动 引入打包输出的所有资源（js、css）
    //需求：需要有结构的html文档
    new HtmlWebpackPlugin({
        //复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js、css）
        template: './src/index.html'
    }),
    //css 提取出来
    new MiniCssExtractPlugin({
        //对输出的css文件进行重命名
        //不重命名 默认是 main.css
        filename: 'css/built.css'
    }),
    //css 压缩
    new CssMinimizerWebpackPlugin()
    //new ESLintPlugin()
],
//模式   生产环境下会自动压缩js代码
mode: 'development', // 'production'
//开发服务器 devServer：用来自动化（自动编译、自动打开浏览器，自动刷新浏览器）
//特点：只会在内存中编译打包，不会有任何输出
//1、下载 webpack-dev-server
//启动deveServer指令为 ：npx webpack-dev-server
devServer: {
    //项目构建后路径 //指定服务器目录
    //旧版本  contentBase:resolve(__dirname,'build'),
    static: {
        directory: path.join(__dirname, 'build')
    },

    //启动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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

}