webpack -- 环境划分构建 · 前端工程化学习笔记

>[success] # 项目环境划分 ~~~ 1.在项目不同阶段，往往需要对其进行不同的webpack配置，例如线上环境就不会需要有'HMR' 热更新的操作，因此可以理解生成环境和开发环境有很大的差异，'生产环境注重运行效率', '开发环境注重开发效率'往往我们需要对不同的环境进行不同环境的配置区分 2.Webpack4 推出模式(mode) 的用法,也会为我们默认添加了不同插件 ~~~ >[danger] ##### 第一种方案利用函数 ~~~ 1.在'webpack.config.js' 如果导出的是一个函数，启动时候 npm webpack // 未传递任何参数默认以开发模式打包 npm webpack --env production // 以生产模式打包 2.当然可以直接使用第三方工具'https://www.npmjs.com/package/cross-env' ~~~ [参考链接](https://webpack.docschina.org/guides/environment-variables/#root) ~~~ // webpack.config.js ... // 支持导出一个函数返回所需要的配置对象 module.exports = (env, argv) => { // 1.通过cli传递的环境名参数 2.运行cli传递到所有参数 const config = { // 开发模式 mode: 'development', ... } if (env === 'production') { // 生产环境 config.mode = 'production' config.devtool = false // 禁用Source Map config.plugins = [ ...config.plugins, // 开发阶段可省略而生产环境需要的插件 ... ] } return config } ~~~ >[danger] ##### 根据配置文件划分 ~~~ 1.不同环境对应不同配置文件（大型项目） 2.这种方式的思路就是利用编程的思想，将共同的部分作为基类也就是'webpack.common.js', 在根据不同的环境来对此基类进行对应的引用配置 3.注意这里的对象合并使用的是 'webpack-merge' ~~~ [webpack-merge](https://www.npmjs.com/package/webpack-merge) * webpack.common.js 中保存公共配置 ~~~ const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/main.js', output: { filename: 'js/bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\\.(png|jpe?g|gif)$/, use: { loader: 'file-loader', options: { outputPath: 'img', name: '[name].[ext]' } } } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'Webpack Tutorial', template: './src/index.html' }) ] } ~~~ * webpack.dev.js 保存开发配置 ~~~ const webpack = require('webpack') const merge = require('webpack-merge') const common = require('./webpack.common') module.exports = merge(common, { 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') // Object.assign 完全覆盖掉前一个对象的同名属性 // 使用webpack-merge 合并公共配置与该配置 module.exports = merge(common, { mode: 'production', plugins: [ new CleanWebpackPlugin(), new CopyWebpackPlugin(['public']) ] }) ~~~ ~~~ 使用开发模式 npm webpack-dev-server --config webpack.dev.js --open 使用生产模式 npm webpack --config webpack-prod.js ~~~