关于webpack的一些配置

css-loader和style-loader

css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。表示在css中使用的url(比如：background-image: url("");)和在js中通过import/require() （比如：import “./css/common.css”）需要通过css-loader来解析。
style-loader的作用是将css插入到页面的style标签中。
使用时style-loader需要跟在css-loader的后面，就是先执行css-loader再执行style-loader。使用方式如下：

 {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                    ],
                exclude: /node_modules/
            },

postcss-loader增加浏览器前缀

postcss-loader表示css后处理器，配合插件autoprefixer来自动给那些可以添加浏览器前缀的样式添加前缀(比如：-webkit -moz -ms -o )。postcss-loader需要在css-loader前使用，使用方式如下，需要在postcss-loader的options属性中添加autoprefixer，autoprefixer默认将支持主流浏览器最近2个版本：

{
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    }
                ],
                exclude: /node_modules/
            },

需要注意的是，autoprefixer还可以添加broswer属性对浏览器版本进行定义，比如：主流浏览器最近5个版本用“last 5 versions”、全球统计有超过1%的使用率使用“>1%”、仅新版本用“ff>20”或”ff>=20″。

{
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: ['last 5 versions'] //最近的5个版本
                                })
                            ]
                        }
                    }
                ],
                exclude: /node_modules/
            },

另外，你也可以配置package.json中的browserslist来使用autoprefixer。

使用package.json中的browserslist字段指定了项目的目标浏览器的范围

在package.json的跟节点下添加browserslist字段如下：

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

然后在项目跟目录下创建.postcssrc.js文件，定义如下：

module.exports = {
  "plugins": {
    //自动引用package.json中的browserslist字段
    "autoprefixer": {}
  }
}

然后在webpack中就可以删除postcss-loader的options字段：

{
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                        },
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ],
                exclude: /node_modules/
            },

关于output的filename字段

如果入口文件是多于一个，可以使用以下占位符来保证输出的文件名字不重复。

• [name] ：表示entry字段作为一个对象是前面的key，比如下面的[name]分别表示main和a。

  entry:{
        main:"./src/script/main.js",
        a:"./src/script/a.js"
    },
    output: {
        path:path.resolve(__dirname, './dist'),
        filename: "js/[name].js",
    },

• [hash] ：表示以本次打包时的hash值命名，比如定义如下

 entry:{
        main:"./src/script/main.js",
        a:"./src/script/a.js"
    },
    output: {
        path:path.resolve(__dirname, './dist'),
        filename: "js/[name]-[hash].js"
    },

打包时的hash

> webpack-demo@1.0.0 webpack D:\demo\webpack\webpack-demo
> webpack --progress --config  webpack.dev.config.js --mode development

Hash: f8550ca5e322f7860cb8
Version: webpack 4.42.1
Time: 165ms
Built at: 2020-04-17 3:59:55 PM
                          Asset       Size  Chunks                         Chunk Names
                     index.html  249 bytes          [emitted]
   js/a-f8550ca5e322f7860cb8.js   3.84 KiB       a  [emitted] [immutable]  a
js/main-f8550ca5e322f7860cb8.js   3.88 KiB    main  [emitted] [immutable]  main
Entrypoint main = js/main-f8550ca5e322f7860cb8.js
Entrypoint a = js/a-f8550ca5e322f7860cb8.js
[./src/script/a.js] 44 bytes {a} [built]
[./src/script/main.js] 63 bytes {main} [built]

• [chunkhash]：表示以本次打包每个文件自己的hash值命名，主要注意的是， [chunkhash]值只要当对应的文件被修改过才会改变。比如定义如下：

 entry:{
        main:"./src/script/main.js",
        a:"./src/script/a.js"
    },
    output: {
        path:path.resolve(__dirname, './dist'),
        filename: "js/[name]-[chunkhash].js"
    },

打包时的chunkhash

> webpack-demo@1.0.0 webpack D:\demo\webpack\webpack-demo
> webpack --progress --config  webpack.dev.config.js --mode development

Hash: aa33098826da5f62c082
Version: webpack 4.42.1
Time: 146ms
Built at: 2020-04-17 4:04:20 PM
                          Asset       Size  Chunks                         Chunk Names
                     index.html  249 bytes          [emitted]
   js/a-3cc3aa9eabe1ba627f67.js   3.84 KiB       a  [emitted] [immutable]  a
js/main-8763b14e88207ac38dc8.js   3.88 KiB    main  [emitted] [immutable]  main
Entrypoint main = js/main-8763b14e88207ac38dc8.js
Entrypoint a = js/a-3cc3aa9eabe1ba627f67.js
[./src/script/a.js] 44 bytes {a} [built]
[./src/script/main.js] 63 bytes {main} [built]

多页面配置

可以使用通过多次new htmlWebpackPlugin来配置多页面

优化打包速度和体积

优化速度：https://www.jianshu.com/p/3b9a19e5cead
优化体积：https://www.jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/