关于生产环境的优化 有两种方法

1.在配置文件中判断环境(适用于小型项目)(webpack.config.js)

2.一个环境对一个配置文件(适用于大项目 因为大项目的环境需要配置的比较多)(webpack.prod.js,webpack.common.js,webpack.dev.js)

第一种在 配置环境中判断环境用if来判读当前环境

普通环境命令：yarn webpack

开发环境命令：yarn webpack —env production 在命令行指定当前模式 module.exports 中的 env接收。

  1. const path = require('path') // path 模块是node自带的 可自行查看
  2. const { CleanWebpackPlugin } = require('clean-webpack-plugin') 
  3. const HtmlWebpackPlugin  = require('html-webpack-plugin') 
  4. const CopyWebpackPlugin = require('copy-webpack-plugin')
  7. module.exports =(env,argv )=> {
  8.     // 普通配置 不属于开发配置
  9.     let confing = {
  10.         mode:'none',
  11.         entry:'./src/index.js',
  12.         output:{
  13.             filename:'bundle.js',
  14.             path:path.join(__dirname,'dist'),
  15.         },
  16.         devtool:"source-map",//devtool有12种类型值
  17.         devServer:{// 开发阶段访问静态资源文件
  18.             contentBase:'./public' // 也可接受一个数组['./public']
  19.         },
  20.         module:{//模块
  21.             rules:[ // rules:[] 是模块的规则加载器 webpack 提供了很多关于 loader插件
  22.                 { //  yarn add babel-loader @babel/core @babel/preset-env --dev
  23.                     test:/\.js$/,
  24.                     use:{
  25.                         loader:'babel-loader',
  26.                         options:{
  27.                             presets:['@babel/preset-env'] //@babel/preset-env 包含了es6的所有新特性
  28.                         }
  29.                     }
  30.                 },
  31.                 {
  32.                     test:/\.css$/, // 以css结尾的文件用use中指定的loader
  33.                     // css-loader: 将文件安装css来执行 style-loader:将css文件用style标签追加到页面上
  34.                     use:['style-loader','css-loader']  // 注意：use如果有多个loader它的执行顺序是从后往前执行 也就是先执行css-loader
  35.                 }, // 每一个对象就是一个模块加载器
  37.             ]
  38.         },
  39.         plugins:[ // 插件
  40.             new HtmlWebpackPlugin({ // 一个HtmlWebpackPlugin生产一个html页面
  41.                 title:'webpack html plugin',
  42.                 meta:{
  43.                     viewport:'width=device-width'
  44.                 },
  45.                 template:'./src/index.html'
  46.             }), //自动生成html
  47.         ]
  48.     }
  50.     // 在配置文件中判断环境(适用于小型项目)
  51.     // env:命令行输入的环境名称
  52.     //argv:命令行中传递的所有参数
  53.     // production 生产环境5
  54.     if(env.production){
  55.         confing.mode = "production"; // 告诉webpack 这是生产环境
  56.         confing.devtool = false; //控制sourceMap 不开启
  57.         confing.plugins = [
  58.             ...confing.plugins,
  59.             new CleanWebpackPlugin(),
  60.             new CopyWebpackPlugin({ //文件copy 从public 复制到dist下 to:"值为dist下的文件夹" 
  61.                 patterns: [
  62.                     { from: "public", to: "dest" }
  63.                 ]
  64.             })
  66.         ] //cleanwebpackplugin 和copywebpackplugn两个插件只有在打包上传时候才会用到。
  67.     }
  69.    return confing
  70. }

第二种，不同环境不同js。 这里只写部分其他逻辑一样 。开发环境的js

wabpack.common.js 就是普通的模式

  1. const path = require('path') // path 模块是node自带的 可自行查看
  3. //commen公共文件
  4. const HtmlWebpackPlugin  = require('html-webpack-plugin') 
  7. module.exports ={
  8.     mode:'none',
  9.     entry:'./src/index.js',// 需要打包的文件路径
  10.     output:{ 
  11.         filename:'bundle.js',
  12.         path:path.join(__dirname,'dist'),
  13.     },
  14.     devtool:"source-map",//devtool有12种类型值
  15.     devServer:{// 开发阶段访问静态资源文件
  16.         contentBase:'./public', // 也可接受一个数组['./public']
  18.     },
  19.     module:{//模块
  20.         rules:[ // rules:[] 是模块的规则加载器 webpack 提供了很多关于 loader插件
  21.             { //  yarn add babel-loader @babel/core @babel/preset-env --dev
  22.                 test:/\.js$/,
  23.                 use:{
  24.                     loader:'babel-loader',
  25.                     options:{
  26.                         presets:['@babel/preset-env'] //@babel/preset-env 包含了es6的所有新特性
  27.                     }
  28.                 }
  29.             },
  30.             {
  31.                 test:/\.css$/, // 以css结尾的文件用use中指定的loader
  32.                 // css-loader: 将文件安装css来执行 style-loader:将css文件用style标签追加到页面上
  33.                 use:['style-loader','css-loader']  // 注意：use如果有多个loader它的执行顺序是从后往前执行 也就是先执行css-loader
  34.             }
  35.         ]
  36.     },
  37.     plugins:[ // 插件
  38.         new HtmlWebpackPlugin({ // 一个HtmlWebpackPlugin生产一个html页面
  39.             title:'webpack html plugin',
  40.             meta:{
  41.                 viewport:'width=device-width'
  42.             },
  43.             template:'./src/index.html'
  44.         }) //自动生成html
  45.     ]
  47. }

webpack.prod.js

  1. const comment = require('./webpack.common')
  3. const { merge }  = require('webpack-merge')// 安装命令：yarn add webpack-merge --dev
  5. const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  7. const CopyWebpackPlugin = require('copy-webpack-plugin')
  9. // Object.assign() 对象合并但数组无法追加所以使用 webpack 提供的 merge 对象，数组合并 webpack 内部会自行处理
  10. // 就是将普通模式的参数替换为开发模式的
  11. module.exports = merge(comment, {
  12.     mode:'production',
  13.     plugins:[
  14.         new CleanWebpackPlugin(),
  15.         new CopyWebpackPlugin({
  16.             patterns: [
  17.                 { from: "public", to: "dest" }
  18.             ]
  19.         })
  20.     ]
  21. })

运行命令：yarn webpack —config webpack.prod.js

如果感觉这样写容易出错可以在 package.json 文件中写入。然后运行命令为 yarn build

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

prod.png