Webapck 生产和开发不同环境下的配置 生产环境优化

不同环境下的不同配置的两种方式

1. 配置文件根据环境不同导出不同配置
2. 一个环节对应一个配置文件

1、配置文件中添加判断 环境名参数 返回不同的配置参数（中小型项目）

const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = (env, argv) => { //导出一个函数 env通过cli传递的环境名参数，argv运行cli所传递的所有参数
  const config = {
    //开发模式下的配置项
  }
 
  if (env === 'production') { //判断是否是生产环境
    config.mode = 'production'
    config.devtool = false //禁用source-map
    config.plugins = [
      ...config.plugins,
      new CleanWebpackPlugin(), //上线打包之前添加clean和copy插件
      new CopyWebpackPlugin(['public'])
    ]
  }

  return config
}

yarn webpack --env production //运行时传入生产环境参数

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

针对不同环境会有三个配置文件：

• webpack.common.js 开发和生产环境相同的配置
• webpack.dev.js 开发环境的配置

const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, { //合并webpack配置
  mode: 'development',
  devtool: 'cheap-eval-module-source-map',
  devServer: {
    hot: true,
    contentBase: 'public'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
})

• webpack.prod.js 生产环境的配置

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

module.exports = merge(common, { //合并webpack配置
  mode: 'production',
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin(['public'])
  ]
})

webpack-merge 合并webpack配置 
通过yarn add webpack-merge --dev安装
yarn webpack --config webpack.prod.js 指定webpack打包的使用的配置文件
也可以将命令定义在package.json scripts中方便使用

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

definePlugin 为代码注入全局成员

默认启用，往代码里注入一个常量 process.env.NODE_ENV 通过这个常量判断当前运行环境

内置插件 先导入webpack模块

const webpack=reguire('webpack');


plugins: [
    new webpack.DefinePlugin({
      // 值要求的是一个代码片段
      API_BASE_URL: JSON.stringify('https://api.example.com')
    })
  ]

tree-shaking 检测并去掉未引用代码

生产模式下自动开启

optimization: { //集中配置webpack内部的优化功能
    // 模块只导出被使用的成员
    usedExports: true,
    // 尽可能合并每一个模块到一个函数中
    concatenateModules: true,
    // 压缩输出结果
    minimize: true
  }

sideEffects副作用

"sideEffects": [
    "./src/extend.js",
    "*.css"
  ]

webpack代码分割 code splitting

应用开始工作时并不是每个模块在启动时都是必要的，所以，分包，按需加载

1. 多入口打包

适应于多页应用程序 一个页面对应一个打包入口 公共部分单独提取

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: {
    index: './src/index.js', //对应index
    album: './src/album.js' //对应albm
  },
  output: {
    filename: '[name].bundle.js' //[name]入口的名称
  },
  optimization: {
    splitChunks: {
      // 自动提取所有公共模块到单独 bundle
      chunks: 'all'
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['index'] //为index页面配置引用的index.bundle.js
    }),
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/album.html',
      filename: 'album.html',
      chunks: ['album']//为index页面配置引用的album.bundle.js
    })
  ]
}

2. 动态导入 让模块按需加载 魔法注释

if (hash === '#posts') {
    // mainElement.appendChild(posts())
    import(/* webpackChunkName: 'components' */'./posts/posts').then(({ default: posts }) => {
      mainElement.appendChild(posts())
    })
  } else if (hash === '#album') {
    // mainElement.appendChild(album())
    import(/* webpackChunkName: 'components' */'./album/album').then(({ default: album }) => {
      mainElement.appendChild(album())
    })
  }