webpack-merge工程代码优化

npm install webpack-merge --save 安装

抽离公共部分webpack.base.js

module.exports = {
  module: { // 打包过程中配置的规则
    rules: [{
      test: /\.js?$/, // 检测以JS结尾的文件
      loader: 'babel-loader', // 语法的编译器 使用需要安装
      exclude: '/node_modules/', // 一些外部文件不需要编译
      options: { // 配置额外的配置项
        presets: ['react', 'stage-0', ['env', {
          targets: { // babel编译的时候会去兼容浏览器最后两个版本
            browsers: ['last 2 versions']
          }
        }]] // 使用babel-loader的时候，可以使用presets配置一些编译的规则 需要安装
      }
    }]
  }
};

client

v3
const merge = require('webpack-merge')
v4
const { merge } = require('webpack-merge')

const path = require('path');
const merge = require('webpack-merge');
const config = require('./webpack.base.js');


const clientConfig = {
  mode: 'development',
  entry: './src/client/index.js', // 入口
  output: { // 打包的文件要放在哪里去
    filename: 'index.js', // 打包之后起的名字
    path: path.resolve(__dirname, 'public') // 打包过后将文件放在哪个目录下
  }
};

module.exports = merge(clientConfig, config);

server

v3
const merge = require('webpack-merge')
v4
const { merge } = require('webpack-merge')

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const merge = require('webpack-merge');
const config = require('./webpack.base.js');

const serverConfig = {
  target: 'node', // 确定打包的是服务端的代码
  mode: 'development',
  entry: './src/index.js', // 入口
  output: { // 打包的文件要放在哪里去
    filename: 'bundle.js', // 打包之后起的名字
    path: path.resolve(__dirname, 'build') // 打包过后将文件放在哪个目录下
  },
  externals: [nodeExternals()], // 依靠node_modules中的文件还需要引入这个包，避免打包警告
}
module.exports = merge(serverConfig, config);