webpack.config.js配置文件分离为公共配置文件（base.config.js）,开发时配置文件（dev.config.js），发布时配置文件（prod.config.js）

本文链接：https://blog.youkuaiyun.com/weixin_48826306/article/details/111347035

配置文件的分离

1、首先安装 webpack-merge

npm install webpack-merge@4.1.5 --save-dev

2、在项目目录下面创建一个build文件夹，里面存放配置文件，分别为，base.config.js，prod.config.js，dev.config.js

3、公共代码放在base.config.js文件中，配置文件分离后，需要将出口路径，就是打包后生成的文件地址更改为（…/dist），不然会直接生成在build文件夹下面

// 使用node中的path包，要先执行 npm init命令
const path = require('path')
// 配置版权信息
const webpack = require('webpack')
// 自动生成index.html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    // 这里需要动态获取项目dist的路径,__dirname就是当前项目dist前面的路径
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'   使用自动生成index.html的插件后就不需要拼接dist路径了
  },
  plugins: [
    new webpack.BannerPlugin("最终版权归reng所有"),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ],
  module: {
    rules: [
      // 处理css文件
      { 
        test: /\.css$/, 
        // css-loader只负责将css文件进行加载
        // style-loader负责将css样式添加到DOM元素中
        // 使用多个 loader时，是从右往左读取的，所以是 先读css-loader，再读的style-loader
        use: [ 'style-loader', 'css-loader' ]
      },
      // 处理less文件
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader" // compiles Less to CSS
        }]
      },
      // 处理url路径图片
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载图片，小于limit时，会将图片编译成base64字符串的形式
              // 当加载图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              // 配置打包后生成的文件名字为原文件的名
              // [name]：表示源文件名字的变量，[hash:8]：生成的hash值只有8位，[ext]：表示生成的文件后缀为源文件的后缀
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      // 处理ES6语法，转换成ES5的语法
      {
        test: /\.js$/,
        // exclude 排除
        // include 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      // 配置vue
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader'
        }
      }

    ]
  },
  // 配置vue只runtime-only 出错
  resolve: {
    // 配置导入文件后缀名
    extensions: ['.css', '.js', '.vue'],
    //alias:a 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
}
// 在package.json文件中的  "script" 中加入  "build": "webpack"    就是执行 npm run bulid 命令就是执行  webpack命令打包

4、开发配置文件dev.config.js，使用webpack-merge合并base.config.js配置文件

// 合并base.config.js配置文件
const WebpackMerge = require('webpack-merge')
// 导入公共配置文件
const BaseConfig = require('./base.config')

module.exports = WebpackMerge(BaseConfig, {
  devServer: {
    contentBase: './dist',   // 根目录
    inline: true,  // 在线更新
    // port: 8000    指定端口号
  }
})

5、生产配置文件prod.config.js

// 丑化代码
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
// 合并base.config.js配置文件
const WebpackMerge = require('webpack-merge')
const BaseConfig = require('./base.config')

module.exports = WebpackMerge(BaseConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()  // 压缩代码
  ]
})

6、用webpack安装的很多包版本不兼容会报错，（“build”: “webpack --config ./build/prod.config.js”, “dev”: “webpack-dev-server --open --config ./build/dev.config.js”）这里就是由于将配置文件分离后，不需要webpack.config.js文件，所以在这里自己指定打包或者运行时用的配置文件。

package.json文件

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.12.2",
    "less-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^1.1.0",
    "url-loader": "^2.0.0",
    "vue": "^2.5.21",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3",
    "webpack-merge": "^4.1.5"
  },
  "dependencies": {
    "vue": "^2.5.21"
  }
}

7、App.vue

<template>
  <div>
    <h2>{{message}}</h2>
  </div>

</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue......'
    }
  },
}
</script>

<style>

</style>

8、index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

9、main.js

// 使用Vue进行开发
import Vue from 'vue'

// const app = new Vue({
//   el: '#app',
//   data: {
//     message: "Vue使用成功啦"
//   },
//   methods: {}
// })
// 使用vue模板
// import App from './vue/App.vue'
import App from './vue/App'
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
})