zoukankan      html  css  js  c++  java
  • Develoment 和 Production 模式的区分打包

    为什么要区分Develoment 和 Production

    Develoment环境需要开启devServer方便开发,Production环境需要精简sourceMap和对代码进行压缩、

    方式一:不同模式用不同配置文件打包

    1.安装webpack-merge合并多个配置文件

    npm install webpack-merge -d
    

    2.webpack-common.js做公共的配置

    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
      entry: {
        main: './src/index.js'
      },
      module: {
        rules: [
          {
            test: /.jpg$/,
            use: {
              loader: 'file-loader',
              options: {
                //占位符
                name: "[name].[ext]",
                outputPath: './img',
                limit: 2048
              }
            }
          },
          {
            test: /.scss$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  //通过import引入的scss文件,也走下班2个loader
                  importLoaders: 2,
                  //开启模块化
                  modules: true
                }
              },
              'sass-loader',
              'postcss-loader'
            ]
          },
          {
            test: /.css$/,
            use: [
              'style-loader',
              'css-loader',
              'postcss-loader'
            ]
          },
          {
            test: /.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        }),
        new CleanWebpackPlugin()
      ],
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
      }
    }
    

    3.webpack-dev.js做的Develoment 环境的配置

    const webpack = require('webpack')
    const { merge } = require('webpack-merge')
    const commonConfig = require('./webpack-common.js')
    const devConfig = {
      mode: 'development',
      devtool: 'cheap-module-eval-source-map',
      devServer: {
        contentBase: './dist/',//开启服务器的目录
        open: true,//自动打开一个浏览器,
        hot: true,
        proxy: {
          '/api': 'http://localhost:3000'
        },
      },
      optimization: {
        usedExports: true
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin()
      ],
    }
    module.exports = merge(commonConfig, devConfig)
    

    4.webpack-prod.js做的Production 环境的配置

    const { merge } = require('webpack-merge')
    const commonConfig = require('./webpack-common.js')
    const prodConfig = {
      mode: 'production',
      devtool: 'cheap-module-source-map',
    }
    module.exports = merge(commonConfig, prodConfig)
    

    5.pakeage.json 利用不同的打包文件打包

      "scripts": {
        "dev": "webpack-dev-server --config webpack-dev.js",
        "build": "webpack --config webpack-prod.js"
      },
      "sideEffects": [
        "*.css"
      ]
    

    方式二:不同模式用不同的环境变量打包

    1.安装webpack-merge合并多个配置文件

    npm install webpack-merge -d
    

    3.webpack-dev.js做的Develoment 环境的配置

    const webpack = require('webpack')
    // const { merge } = require('webpack-merge')
    const commonConfig = require('./webpack-common.js')
    const devConfig = {
    ...
    }
    module.exports = devConfig
    // module.exports = merge(commonConfig, devConfig)
    

    4.webpack-prod.js做的Production 环境的配置

    // const { merge } = require('webpack-merge')
    const commonConfig = require('./webpack-common.js')
    const prodConfig = {
      ...
    }
    // module.exports = merge(commonConfig, prodConfig)
    module.exports = prodConfig
    

    2.webpack-common.js做公共的配置,并且根据环境变量,到处不同的merge config

    ...
    const { merge } = require('webpack-merge')
    const devConfig = require('./webpack-dev.js')
    const prodConfig = require('./webpack-prod.js')
    const commonConfig = {
      ...
    }
    //关键代码
    module.exports = function (env) {
      if (env && env.production) {
        return merge(commonConfig, prodConfig)
      } else {
        return merge(commonConfig, devConfig)
      }
    }
    

    5.pakeage.json 不再利用不同的打包文件打包

    不再利用不同的打包文件打包,而都是webpack-common.js。build的时候传了环境变量--env.production。

    "scripts": {
        "dev": "webpack-dev-server --config webpack-common.js",
        "build": "webpack --env.production --config webpack-common.js",
        "dev-build": "webpack --profile --json > stats.json --config webpack-common.js "
      },
    
  • 相关阅读:
    C++中虚函数
    ES6入门四:对象字面量扩展与字符串模板字面量
    ES6入门三:解构
    ES6入门二:默认值与默认值表达式
    ES6入门一:块级作用域(let&const)、spread展开、rest收集
    JavaScript严格模式
    JavaScript中with不推荐使用,为什么总是出现在面试题中?
    ES6入门一:ES6简介及Babel转码器
    HTML5之websocket
    HTML5之fileReader异步读取文件及文件切片读取
  • 原文地址:https://www.cnblogs.com/superlizhao/p/13615088.html
Copyright © 2011-2022 走看看