大前端基础【3-2笔记】webpack优化

优化

线上环境注重运行效率，开发环境注重开发效率。针对这个问题，webpack4推出了模式（mode）的用法。webpack建议我们为不同的工作环境创建不同的配置。

1、不同环境下的配置

1、配置文件根据环境不同导出不同的配置

1、定义主要的config：

 const config = {
    mode: 'none',
    entry: './src/main.js',
    output: {
      filename: 'bundle.js',
      path: path.join(__dirname, 'dist'),
      // publicPath: 'dist/'
    },
    // devtool: 'source-map',
    devtool: 'eval',
    //为webpack-dev-server指定相关的选项
    devServer: {
      hot: true
    },
    module: {
      rules: [
        {
          test: /.html$/,
          use: [
            'html-loader'
          ]
        },
        {
          test: /.css$/, //正则表达式，匹配打包过程中遇到的文件路径
          //注意：use的顺序是从后往前执行，所以先执行的loader一定要放到末尾
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /.jpg$/, //正则表达式，匹配打包过程中遇到的文件路径
          //注意：use的顺序是从后往前执行，所以先执行的loader一定要放到末尾
          use: [
            'file-loader'
          ]
        }
      ]
    },
    plugins: [
      // new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Webpack plugin Sample', //生成的html的标题 //生成的html的标题,没有模板的情况下，生成的dist文件夹下的html文件
        mata: {
          viewport: 'width=device-width'
        },
        template: './src/index.html'
      }),
      // new CopyWebpackPlugin({
      //   patterns: [{ from: path.resolve(__dirname, './public'), to: "public" }],
      // })
      new webpack.HotModuleReplacementPlugin()
    ]
  }

2、判断环境变量，添加不同的配置（适用于中小型项目）

module.exports = (env, argv) => {
    //只有在production这种情况下才会机型public目录的复制
  if(env === 'production'){
    config.mode = 'production'
    config.devtool = false
    config.plugins = [
      ...config.plugins,
      new CleanWebpackPlugin(),
      // new CopyWebpackPlugin(['public'])
       new CopyWebpackPlugin({
        patterns: [{ from: path.resolve(__dirname, './public'), to: "public" }],
      })
    ]
  }
  return config
}

3、运行时添加–env参数

yarn webpack --env production

2、一个环境对应一个配置文件（建议）

不同环境对应不同的配置文件

1、webpack.common.js

const HtmlWebpackPlugin = require("html-webpack-plugin")
const webpack = require("webpack")

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: 'js/bundle.js'
  },
  module: {
    rules: [
      {
        test: /.html$/,
        use: [
          'html-loader'
        ]
      },
      {
        test: /.css$/, //正则表达式，匹配打包过程中遇到的文件路径
        //注意：use的顺序是从后往前执行，所以先执行的loader一定要放到末尾
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.jpg$/, //正则表达式，匹配打包过程中遇到的文件路径
        //注意：use的顺序是从后往前执行，所以先执行的loader一定要放到末尾
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack plugin Sample', //生成的html的标题 //生成的html的标题,没有模板的情况下，生成的dist文件夹下的html文件
      mata: {
        viewport: 'width=device-width'
      },
      template: './src/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

2、安装merge依赖

yarn add webpack-merge --dev

3、webpack.dev.js

const {merge} = require('webpack-merge')
const path = require("path")
const common = require('./webpack.common.js')
const CopyWebpackPlugin = require("copy-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [{ from: path.resolve(__dirname, './public'), to: "public" }],
    })
  ]
})

4、运行

yarn webpack --config webpack.prod.js

5、将其配置到script中

"scripts": {
    "build": "webpack --config webpack.dev.js"
  },

6、运行

yarn build

2、denfinePlugin

为代码注入全局成员

1、webpack.config.js

const webpack = require("webpack")

module.exports = {
  mode: "none",
  entry: './src/main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins:[
    new webpack.DefinePlugin({
      API_BASE_URL: '"http://www.baidu.com"'
    })
  ]
}

2、main.js

console.log(API_BASE_URL)

3、运行

yarn webpack

3、Tree Shaking与concatenateModules

未引用代码（dead-code），Tree Shaking不是某一个配置选项，是一组功能搭配使用过后的优化效果，生产模式环境下，会自动开启tree-shaking

”usedExports“负责标记枯树枝，”minimize“负责摇掉它们

optimization: {
    usedExports: true,
    minimize: true
}

concatenateModules，合并代码模块，尽可能的将所有模块合并输出到一个函数中，既提升了运行效率，又减小了代码的体积。

optimization: {
    usedExports: true,
    minimize: true,
    concatenateModules: true
  },

4、webpack提取公共模块

不同入口中肯定会有公共模块

optimization: {
    splitChunks:{
       chunks: 'all'
    }
  },