项目中webpack配置文件详解(二)

                                       项目中webpack配置文件详解(二)

这一篇是接着上一篇继续介绍剩余的配置项。

首先是延续上一篇剩余的postcss-loader。

postcss-loader是为了解决浏览器兼容问题，先上个效果图，如下：

比如我们写了box-sizing:border-box，它会帮我们补全为浏览器识别的语法。解决兼容问题，使用方法如下：

首先需要安装postcss-loader

npm install postcss-loader --save

然后在解析css文件时使用它，跟css-loader，style-loader使用方法一样，具体代码在上一篇有截图。

还需要配置一下配置文件，在webpack.config.js同级目录下新建postcss.config.js文件，在配置文件中添加如下代码：

module.exports = {
    plugins:[
        require('autoprefixer')({
            browsers:["> 0.01%"]
        })
    ]
};

这样就基本完成了，用处还是蛮大的，使用起来也很方便。

接下来继续介绍webpack配置文件剩余部分：

  resolve: {
    extensions: [
      '.web.js',
      '.mjs',
      '.js',
      '.json',
      '.web.jsx',
      '.jsx',
      '.scss'
    ]
  }

resolve，就是需要解析的部分了，extensions是需要自动解析的部分，还是很好理解的，我们在extensions里面的所有格式的文件都会被自动解析。

  optimization: {
    //包清单
    runtimeChunk: {
      name: "manifest"//用来维护模块之间的联系，单独拆分出来
    },
    //拆分公共包
    splitChunks: {
      cacheGroups: {
        //项目公共组件
        common: {
          chunks: "initial",
          name: "common",
          minChunks: 2,//最小chunk
          maxInitialRequests: 5,//最大初始化请求
          minSize: 0//最小尺寸
        },
        //第三方组件
        vendor: {
          test: /node_modules/,
          chunks: "initial",
          name: "vendor",
          priority: 10,//优先级
          enforce: true//强制创建 cache group,忽略minSize等参数
        }
      }
    }
  }

拆分组件，将node_modules下面的初始化需要用到的文件单独打包为vendor.js，这个依赖库文件打包后比较大，我们可以使用compression-webpack-plugin来将它压缩，压缩后的大小大概为原来的1/3。

const CompressionPlugin = require('compression-webpack-plugin');
    plugins: [
        new CompressionPlugin({
            asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
            algorithm: 'gzip',//算法
            test: new RegExp(
                '\\.(js|css)$'  //压缩 js 与 css
            ),
            threshold: 10240,//只处理比这个值大的资源。按字节计算
            minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
        })
    ]

配置完成后就可以了，现在我们打包后会生成vendor.js还有相对应的后缀为gzip的压缩文件，启动页自动引入压缩文件。我们只需要完成上述步骤中的配置就OK了。

接下来就只剩下几个插件没有介绍了。

const webpack = require('webpack');
  plugins:[
    new webpack.HotModuleReplacementPlugin()
  ]

webpack模块热替换，这个主要是我们开发过程中使用，每次修改代码以后不需要刷新浏览器，项目会自动打包，编译，然后刷新。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  plugins:[
     new UglifyJsPlugin()
  ]

压缩js文件插件，使用起来也比较简单，直接require然后实例化一下就好了。

const OpenBrowserPlugin = require('open-browser-webpack-plugin');
 plugins:[
    new OpenBrowserPlugin()
 ]

这个也是我们在开发环境中使用到的，作用就是打开浏览器，比如说我们npm start启动项目，然后它会帮我们打开默认浏览器然后访问我们的项目运行地址。

到这，这个项目中用到的配置就介绍完毕了，然后就是说一下，有些配置我们开发的时候使用，上线的时候不需要，所以可以建立两个配置文件。默认不指定的话会使用webpack.config.js。我们上线的时候可以在package.json里面手动指定一下，像这样：

"build": "rd /s/q dist && webpack --config webpack.config.prod.js"

这样我们运行npm run build就会使用webpack.config.prod.js配置文件。

最后，放上完整的配置文件：

const path = require("path");
var webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    entry: {
        index: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js|jsx|mjs)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env", "@babel/preset-react"
                        ],
                        plugins: [
                            "@babel/plugin-proposal-class-properties", // es6 class定义转换
                            "@babel/plugin-transform-runtime", //处理async awaiit支持
                            [ //装饰器
                                "@babel/plugin-proposal-decorators", {
                                "legacy": true
                            }
                            ]
                        ]
                    }
                }
            }, {
                test: /\.(css|scss)$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader', 'sass-loader']
                })
            }, {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: '[path][name].[ext]',
                            outputPath: 'images/'
                        }
                    }
                ]
            }, {
                test: /\.(ttf|eot|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]',
                    outputPath: 'images/'
                }
            }
        ]
    },

    resolve: {
        extensions: [
            '.web.js',
            '.mjs',
            '.js',
            '.json',
            '.web.jsx',
            '.jsx',
            '.scss'
        ]
    },

    plugins: [
        new ExtractTextPlugin('style.css'),
        new HtmlWebpackPlugin({
            title: 'Custom template',
            // Load a custom template (lodash by default see the FAQ for details)
            template: 'index.html'
        }),
        new UglifyJsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new OpenBrowserPlugin(),
        new CompressionPlugin({
            asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
            algorithm: 'gzip',//算法
            test: new RegExp(
                '\\.(js|css)$'  //压缩 js 与 css
            ),
            threshold: 10240,//只处理比这个值大的资源。按字节计算
            minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
        })
    ],
    optimization: {
        //包清单
        runtimeChunk: {
            name: "manifest"
        },
        //拆分公共包
        splitChunks: {
            cacheGroups: {
                //项目公共组件
                common: {
                    chunks: "initial",
                    name: "common",
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0
                },
                //第三方组件
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },
    devServer:{
        proxy:{
            '/api':{
                target:'http://localhost:3000',
                secure:false
            }
        }
    }
};

希望对大家有帮助 \(^o^)/~