webpack从0到1的配置（七）

最新推荐文章于 2024-11-30 14:36:53 发布

原创最新推荐文章于 2024-11-30 14:36:53 发布 · 467 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #初级 #基础

webpack 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍如何配置Webpack以适应生产环境需求，包括使用optimize-css-assets-webpack-plugin压缩CSS代码、配置source-map进行源码调试及利用cross-env和DefinePlugin区分不同生产环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接着讲webpack.prod.config.js的配置

我们在生产环境下使用optimize-css-assets-webpack-plugin 插件来打包的时候压缩css代码
npm install optimize-css-assets-webpack-plugin --save-dev
webpack.prod.config.js配置如下，mode设置为"production"

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.config');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩css代码

const prodWebpackConfig = merge(baseWebpackConfig, {
    mode: 'production',
    devtool: 'source-map', // 生产环境可在浏览器上调试源码，不建议，这样会暴露源码。可设置为none
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin({})   // 压缩css代码，去掉空格这些，在安装在生产环境下
      ]
    },
  });
module.exports = prodWebpackConfig;

现在可以 npm run build
生成的dits文件里多了一个.map结尾的文件，这是因为配置了devtool: 'source-map',可以在浏览器上调试源码。
同时打开css文件，css文件被压缩，去掉了空格。
然后试一下 npm run dev，访问localhost:8080
npm run dev 并不会生成dist文件夹，它打包的文件在硬盘里。

最后一个知识点介绍

一般公司的项目都会有测试环境和正式环境，它们都属于生产环境，打包命令都使用npm run build，假如有个接口测试环境下参数传"test", 正式环境下参数传"prod", 这样改怎么判断是测试环境还是正式环境？

这里又需要安装一个依赖 cross-env
npm install cross-env --save-dev
修改package.json文件的scripts选项,将之前的build改为了build:test, build:prod

"scripts": {
    "build:test": "cross-env PROD_NAME=test webpack --config ./webpack/webpack.prod.config.js",
    "build:prod": "cross-env PROD_NAME=prod webpack --config ./webpack/webpack.prod.config.js",
    "dev": "webpack-dev-server --open webpack --config ./webpack/webpack.dev.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

执行 npm run build:test 后 process.env会有一个新增PROD_NAME属性，可以在webpack.prod.config.js文件里console.log出来看一下

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.config');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩css代码
+  console.log('welcome', process.env.PROD_NAME);
const prodWebpackConfig = merge(baseWebpackConfig, {
    mode: 'production',
    devtool: 'source-map', // 生产环境可在浏览器上调试源码，不建议，这样会暴露源码。可设置为none
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin({})   // 压缩css代码，去掉空格这些，在安装在生产环境下
      ]
    },
  });
  module.exports = prodWebpackConfig;

在终端里可以看到

执行 npm run build:prod 看看

但是！通过cross-env插件定义PROD_NAME，但是在src里的文件里是无法获取的，可以在main.js里试一下console.log(process.env.PROD_NAME),打印的是undefined
为了在src源文件里能够获取到process.env.PROD_NAME，这里需要一个插件DefinePlugin，它webpack自带的不需要下载
webpack.prod.config.js文件增加plugins的配置

const webpack = require('webpack');

const prodWebpackConfig = merge(baseWebpackConfig, {
    /**代码省略.........**/
    plugins: [
        new webpack.DefinePlugin({
          'process.env.PROD_NAME': JSON.stringify(process.env.PROD_NAME), // 此插件用于定义一些源文件可以拿到的变量
        })
    ]
 });
 module.exports = prodWebpackConfig;

修改main.js文件

  const home_text = require('./home');
  import './assets/main.css';
  const text_p = document.getElementById('text-p');
+ text_p.innerHTML = process.env.PROD_NAME;

分别执行npm run build:test 和npm run build:prod，打开dist下的index.html看看是否为test和prod
像这样使用不同的命令为测试环境和正式环境打包，这样就可以在你的代码中判断是哪个环境了

webpack从0到1的配置到此完结。