(精华)2020年7月10日 webpack webpack多环境配置

更好的维护代码，把 webpack.config.js 拆分成三个部分：
公 共 配 置 ： 把 开 发 和 生 产 环 境 需 要 的 配 置 都 集 中 到 公 共 配 置 文 件 中 ， 即
webpack.common.js
开发环境配置：把开发环境需要的相关配置放置到 webpack.dev.js
生产环境配置：把生产环境需要的相关配置放置到 webpack.prod.js

安装yarn add webpack-merge --dev 或者 npm i webpack-merge -D

生产文件环境webpack.pro.js

const webpack = require('webpack'); 
const path = require('path'); 
const merge = require('webpack-merge');
const DIST_PATH = path.resolve(__dirname, './dist/'); 
const commonConfig = require('./webpack.common.js'); 
module.exports = merge(commonConfig, { 
    // mode: 'production',
    mode:'development', 
    output: { 
        path: DIST_PATH, // 创建的bundle生成到哪里
        filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
     }, 
    // 设置Webpack的mode模式 
    plugins: [ ]
})

开发文件环境webpack.dev.js

const webpack = require('webpack'); 
const path = require('path'); 
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js'); 
const DIST_PATH = path.resolve(__dirname, './dist/'); 

module.exports = merge(commonConfig, { 
    mode: 'development', 
    // 设置Webpack的mode模式 
    // 开发环境下需要的相关插件配置 
    output: { 
        path: DIST_PATH, // 创建的bundle生成到哪里
        filename: '[name].js', // 创建的bundle的名称
     }, 
     
    plugins: [ ], 
     // 开发服务器 
     devServer: { 
        hot: true, // 热更新，无需手动刷新 
        contentBase: DIST_PATH,  //热启动文件所指向的文件路径
        host: '0.0.0.0', // host地址 
        port: 8080, // 服务器端口 
        historyApiFallback: true, // 该选项的作用所用404都连接到index.html 
        proxy: { 
        "/api": "http://localhost:3000" 
        // 代理到后端的服务地址，会拦截所有以api开头的请求地址
         } ,
        useLocalIp: true 
        // open:true,
        // noInfo:true
      }
})

webpack.common.js

var webpack = require('webpack');
var path = require('path');
var glob = require("glob");

var DIST_PATH = path.resolve(__dirname, './dist');

//入口文件
var SRC_PATH = path.resolve(__dirname, './src');
var newEntries = {};
// index:'./src/index.js',
// main:'./src/main.js'

// var files = glob.sync(path.join(SRC_PATH,'/*.js')); // 方式一
var files = glob.sync(SRC_PATH + '/*.js'); //方式二
files.forEach(function (file, index) {
  // var substr =  file.split('/').pop().split('.')[0];
  var substr = file.match(/src\/(\S*)\.js/)[1];
  newEntries[substr] = file;
  // [\s]---表示，只要出现空白就匹配；
  // [\S]---表示，非空白就匹配；

})

// 声明/dist的路径 为成绝对路径
module.exports = {
  // 入口JS路径 
  // 指示Webpack应该使用哪个模块，来作为构建其内部依赖图的开始 
  // entry: path.resolve(__dirname,'./src/index.js'), 
  // 支持单文件，多文件打包
  // entry: './src/index.js',   //方式一
  //  entry: ['./src/index.js','./src/main.js'], //方法二
  // entry: {
  //     index:'./src/index.js',
  //     main:'./src/main.js'
  //  },
  entry: newEntries,

  // 编译输出的JS入路径 
  // 告诉Webpack在哪里输出它所创建的bundle，以及如何命名这些文件 
  output: {
    path: DIST_PATH, // 创建的bundle生成到哪里
    // filename: '[name].[chunkhash:8].js', // 创建的bundle的名称
    filename: '[name].js', // 创建的bundle的名称
  },
  // 模块解析 
  module: {

  },
  // 插件
  plugins: [

  ],

}

启动

"scripts": { "build": "webpack --config ./build/webpack.prod.js --mode production", "dev": "webpack-dev-server --config ./build/webpack.dev.js --mode development --open", "test": "echo \"Error: no test specified\" && exit 1" },