Development / Production 配置不同文件

　　## 使用 webpack-merge 插件 （npm i -D webpack-merge）

　　抽取三个配置文件：

　　　　webpack.common.js

 

  1 const path = require('path')
  2 const HtmlWebpackPlugin = require('html-webpack-plugin')
  3 const CleanWebpackPlugin = require('clean-webpack-plugin')
  4 const CopyWebpackPlugin = require('copy-webpack-plugin')
  5 const webpack = require('webpack')
  6 
  7 // webpack的配置文件遵循着CommonJS规范
  8 module.exports = {
  9   // entry: './src/main.js',
 10   entry: {
 11     index: './src/index.js',
 12     other: './src/other.js'
 13   },
 14   output: {
 15     // path.resolve() : 解析当前相对路径的绝对路径
 16     // path: path.resolve('./dist/'),
 17     // path: path.resolve(__dirname, './dist/'),
 18     path: path.join(__dirname, '..', './dist/'),
 19     // filename: 'bundle.js',
 20     filename: '[name].js',
 21     publicPath: '/'
 22   },
 23   // 开启监视模式, 此时执行webpack指令进行打包会监视文件变化自动打包
 24   // watch: true
 25   plugins: [
 26     new HtmlWebpackPlugin({
 27       filename: 'index.html',
 28       template: './src/index.html',
 29       chunks: ['index', 'other']
 30     }),
 31     new HtmlWebpackPlugin({
 32       filename: 'other.html',
 33       template: './src/other.html',
 34       chunks: ['other']
 35     }),
 36     new CleanWebpackPlugin(),
 37     new CopyWebpackPlugin([
 38       {
 39         from: path.join(__dirname, '..', 'assets'),
 40         to: 'assets'
 41       }
 42     ]),
 43     new webpack.BannerPlugin('biubiu!'),
 44     new webpack.ProvidePlugin({
 45       $: 'jquery',
 46       jQuery: 'jquery'
 47     })
 48   ],
 49   module: {
 50     rules: [
 51       {
 52         test: /\.css$/,
 53         // webpack读取loader时 是从右到左的读取, 会将css文件先交给最右侧的loader来处理
 54         // loader的执行顺序是从右到左以管道的方式链式调用
 55         // css-loader: 解析css文件
 56         // style-loader: 将解析出来的结果 放到html中, 使其生效
 57         use: ['style-loader', 'css-loader']
 58       },
 59       { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
 60       { test: /\.s(a|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
 61       {
 62         test: /\.(jpg|jpeg|png|bmp|gif)$/,
 63         use: {
 64           loader: 'url-loader',
 65           options: {
 66             limit: 5 * 1024,
 67             outputPath: 'images',
 68             name: '[name]-[hash:6].[ext]'
 69           }
 70         }
 71       },
 72       { test: /\.(woff|woff2|eot|svg|ttf)$/, use: 'url-loader' },
 73       {
 74         test: /\.js$/,
 75         use: {
 76           loader: 'babel-loader',
 77           // options: {
 78           //   presets: ['@babel/env'],
 79           //   plugins: [
 80           //     '@babel/plugin-proposal-class-properties',
 81           //     '@babel/plugin-transform-runtime'
 82           //   ]
 83           // }
 84         },
 85         exclude: /node_modules/,
 86 
 87       },
 88       {
 89         test: /\.(htm|html)$/i,
 90         loader: 'html-withimg-loader'
 91       },
 92       // {
 93       //   // 用于解析jQuery模块的绝对路径
 94       //   test: require.resolve('jquery'),
 95       //   use: {
 96       //     loader: 'expose-loader',
 97       //     options: '$'
 98       //   }
 99       // }
100     ]
101   }
102 }

 

 

 

　　　　webpack.pro.js

 

const merge = require('webpack-merge')
const baseConfig = require('./webpack.common.js')
const webpack = require('webpack')

// webpack的配置文件遵循着CommonJS规范
module.exports = merge(baseConfig, {
  mode: 'production',
  devtool: 'cheap-module-source-map',
  plugins: [
    new webpack.DefinePlugin({
      IS_DEV: 'false',
      // test: '1 + 1', // DefinePlugin会解析定义的环境变量表达式, 当成JS执行
      // test2: '"zs"'
    })
  ]
})

 

 

　　　　webpack.dev.js

 

const merge = require('webpack-merge')
const baseConfig = require('./webpack.common.js')
// 引入webpack
const webpack = require('webpack')
// webpack的配置文件遵循着CommonJS规范
module.exports = merge(baseConfig, {
  mode: 'development',
  // 开启监视模式, 此时执行webpack指令进行打包会监视文件变化自动打包
  // watch: true
  devServer: {
    open: true,
    hot: true, // 开启热更新
    compress: true,
    port: 3000,
    // contentBase: './src'
    proxy: {
      // /api/getUserInfo
      // 当前端请求 /api 地址时, 会将请求转发到 
      // http://localhost:9999/api
      // 举例: 客户端现在请求的时 /api/getUserInfo
      // 此时会将请求转发到: http://localhost:9999/api/getUserInfo
      // '/api': 'http://localhost:9999',
      // 此时会将请求转发到: http://localhost:9999/getUserInfo
      // '/getUserInfo': 'http://localhost:9999'
      '/api': {
        target: 'http://localhost:9999',
        // 转发请求时不会携带 /api
        // http://localhost:9999/getUserInfo
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      IS_DEV: 'true',
      // test: '1 + 1', // DefinePlugin会解析定义的环境变量表达式, 当成JS执行
      // test2: '"zs"'
    })
  ]
})

1  ## 生产环境打包
2 "build": "webpack --config ./webpack.pro.js"
3 ## 开发环境打包
4 "dev": "webpack --config ./webpack.dev.js"

 

##　Development / Production 环境使用不同的配置文件不需要再重复切换。把开发环境和生产环境文件各自放在pro和dev文件中，抽取通用配置放在 common 文件中。在 pro  和 dev 中 使用 webpack-merge 把配置与common 的 配置进行合并并导出.

const merge = require('webpack-merge') const baseConfig = require('./webpack.base.js') const webpack = require('webpack')
// webpack的配置文件遵循着CommonJS规范 module.exports = merge(baseConfig, {   mode: 'production',   devtool: 'cheap-module-source-map',   plugins: [     new webpack.DefinePlugin({       IS_DEV: 'false',       // test: '1 + 1', // DefinePlugin会解析定义的环境变量表达式, 当成JS执行       // test2: '"zs"'     })   ] })