webpack-merge合并webpack配置文件

下载插件

npm install webpack-merge -D

1、webpack.config.base.js开发环境和生产环境的共同配置

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
// 打包多页应用
module.exports = {
  entry: {
    index: './src/index.js'
  }, // 入口
  output: { // 出口
    filename: '[hash].js', // 打包后的文件名 [name]为home或者main
    path: path.resolve(__dirname, 'dist'), // 打包后输出的文件路径，在__dirname路径下创建文件dist输出，path.resolve() 方法将路径或路径片段的序列解析为绝对路径。
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   use: ['url-loader']
      // },
      {
        test: /\.m?js$/,
        use: {
          loader: 'babel-loader', // 用babel-loader把es6转为es5
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  resolve: { //设置模块如何被解析 第三方包
    // 使用绝对路径，将只在给定目录中搜索。
    modules: [path.resolve('node_modules')],
    // modules: ['node_modules'],
    // 之前引入方式为import style from 'src/css/style.css',使用别名后import style from 'css/style.css'
    alias: { // 创建别名
      css: path.resolve(__dirname, 'src/css'),
      img: path.resolve(__dirname, 'src/img')
    },
    // 自动解析确定的扩展,如果引入import index from './index',没有后缀名
    //如果当前文件夹下有index.js，默认找index.js，如果没有index.js,就找index.vue，否则找index.json
    extensions: ['.js', '.vue', '.json']
  },
  plugins: [
    // 分别显示模板和打包后的文件名，chunks: ['home']时home文件只引入home.js，否则会引入home.js和main.js所有js
    // 如果模板文件两个js都需要，可以引入多个chunk,chunks: ['home','main']
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      title: 'webpack测试'
    }),
    // 打包的时候输出文件夹dist目录中的所有文件都将被删除，但是目录不会删除 
    new CleanWebpackPlugin(),
    new CopyPlugin([{ // 注意参数是数组，把项目中存在的某一个文件复制到打包后的文件夹（dist）里
      from: 'doc',
      to: 'doc'
    }]),
    new webpack.BannerPlugin('make L') // 版权声明，添加到打包输出后的js代码之前

  ]
}

 

2、webpack.config.dev.js开发环境配置

let { smart } = require('webpack-merge');
let base = require('./webpack.config');
module.exports = smart(base, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: 8080, // 打包后的输出端口
    progress: true, // 打包过程中的打包进度条
    contentBase: './dist', // 以./dist目录作为静态服务文件夹
    // 3）有服务端，但是不想用代理来处理，而是在服务端中启动webpack,web端口也用服务端端口
    //2）前端mock模拟数据，app为express里的app
    // before (app) {
    //   console.log('app', 111)
    //   app.get('/user', (req, res) => {
    //     res.json({ name: 'jack,before' })
    //   });
    // }
    // 1）
    proxy: {// 重写方式，代理
      '/api': {
        target: 'http://localhost:3000',
        // changeOrigin: true,
        pathReWrite: { '^/api': '' }
      }
    }
  }
})

3、webpack.config.pro.js生产环境

let { smart } = require('webpack-merge');
let base = require('./webpack.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 把css文件单独抽取出来,替代了ExtractTextPlugin
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin'); // 替代了UglifyJsPlugin
module.exports = smart(base, {
  optimization: { // 优化项
    minimizer: [
      new UglifyJsPlugin(),
      new TerserJSPlugin(), // 压缩js
      new OptimizeCssAssetsPlugin() // 压缩css,使用了这个插件后，js的压缩就不生效了，所以安装terser-webpack-plugin压缩js
    ]
  },
  mode: 'production',
  devtool: false,
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/main.css', // 抽取出来的css文件名main.css, css/main.css：抽取出来的文件放到css文件下叫mian.css
    }),
  ]
})