Webpack 不同环境下的配置

最新推荐文章于 2022-09-03 20:28:26 发布

毛小星

最新推荐文章于 2022-09-03 20:28:26 发布

阅读量330

点赞数

分类专栏：前端工程化文章标签： javascript webpack

本文链接：https://blog.csdn.net/weixin_50964668/article/details/115273682

版权

本文介绍了如何使用Webpack为开发和生产环境配置不同的打包设置。通过webpack.common.js（公共配置）、webpack.dev.js（开发环境配置）和webpack.prod.js（生产环境配置）三个文件，实现环境间的差异性配置。在开发环境中，启用source map和dev-server；而在生产环境中，关闭source map，使用CleanWebpackPlugin清理旧代码，并应用hash以提示浏览器更新。

摘要由CSDN通过智能技术生成

Webpack 不同环境下的配置

我们在使用 Webpack 去构建我们的项目的时候，我们肯定要区分本地开发环境和线上环境的一些配置，因为它们两者有很多不同的地方，例如线上环境我们就不需要开启 source map 这样的选项来防止别人暴露我们的源代码。所以我们可以通过使用不同配置文件去在不同环境下打包我们的代码。
我们至少需要三个文件去配置我们的项目

webpack.common.js 公共配置
webpack.dev.js 开发环境配置
webpack.prod.js 生产环境配置

这样我们就能使用不同的配置文件去配置不同的环境，这时我们还需要一个插件 webpack-merge 去在开发配置文件和生产配置文件中合并我们的公共配置文件

// 安装 webpack-merge
yarn add webpack-merge --dev

webpack.common.js

这个文件我们可以用来配置一些公共的 webpack 配置

const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 配合 vue-loader 使用，用于编译转换 .vue 文件
const HtmlWebpackPlugin = require('html-webpack-plugin') // 用于生成 index.html 文件

module.exports = {
   
  entry: './src/main.js',
  output: {
   
    filename: 'js/bundle.js'
  },
  module: {
   
    rules: [
      {
   
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
   
        test: /.js$/,
        use: {
   
          loader: 'babel-loader',
          options: {
   
            pres