9102年webpack4搭建vue项目（二）巧妙兼容环境引入不同地址，详解更改文件后dist文件未清除的解决方法

2024-02-09 05:18:13




## **9102年webpack4搭建vue项目（二）** 

----

**巧妙兼容环境引入不同地址，详解更改文件后dist文件未清除的解决方法** 

大家好，欢迎来到9102年webpack4搭建vue项目（二）的博客，本期我们将为大家详细介绍webpack4的配置方法、兼容环境引入不同地址的技巧，以及解决更改文件后dist文件未清除的方法。

### **webpack4的配置方法** 

webpack4的配置方法非常简单，只需要在项目根目录下创建一个名为webpack.config.js的文件，然后在文件中编写如下代码：

```javascript
module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

兼容环境引入不同地址的技巧

在开发过程中，我们经常需要在不同环境中运行项目，例如开发环境、测试环境和生产环境。在不同的环境中，项目所引用的资源地址可能不同。为了兼容不同环境的地址引入，我们可以使用webpack的DefinePlugin插件，在不同的环境中定义不同的变量，然后在代码中使用这些变量来引用资源。例如，我们可以使用以下代码来定义不同的环境变量：

const webpack = require('webpack');

module.exports = {
  entry: './src/main.js',
  output: {
    path: './dist',
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
      }
    })
  ]
};

然后，我们可以在代码中使用以下代码来引用资源：

const apiUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8080/api' : 'https://www.example.com/api';

fetch(apiUrl)
  .then(response => response.json())
  .then(data => console.log(data));