Webpack学习笔记(六)：生产环境

最新推荐文章于 2022-09-21 16:32:02 发布

左手一杯酒

最新推荐文章于 2022-09-21 16:32:02 发布

阅读量150

点赞数

分类专栏：前端文章标签： webpack 前端

本文链接：https://blog.csdn.net/u010154520/article/details/107562672

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

目的

生产环境和开发环境不同，开发环境需要强大的source Maps 排查问题，需要HMR。但生产环境不需要这些，生产环境需要的是压缩bundle，资源优化，轻量甚至不需要source Maps。所以需要针对这两种环境进行区分配置

Merge 工具

生产环境和开发环境虽然有些不同，但还有很多配置都是相同的。为了防止重复配置，webpack可以保留一份common配置，针对不同环境进行个性化配置，最后将个性化配置和common配置组合起来。这个组合就使用的是merge

安装依赖

npm install --save-dev webpack-merge

新建webpack.common.js

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

 module.exports = {
   entry: {
     app: './src/index.js'
   },
   plugins: [
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       title: 'Production'
     })
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist')
   }
 };

新建webpack.prod.js

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

 module.exports = merge(common, {
   mode: 'production',
 });