webpack 5.0配置

webpack 5.0配置

1.webpack.common.js文件配置 公共配置 loader、plugin

前两天从webpack 2.0到webpack 5.0做了升级，简直要吐血，webpack 5.0配置简化了不少，loader文件规则配置参数位置有变化

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导入每次删除文件夹的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 复用loader加载器
const commonCssLoader = [MiniCssExtractPlugin.loader];
module.exports = {
  // 入口文件 如果是./src/index.js 在webpack 4.0以后无需配置
  entry: './src/acc-ivr-sdk.js',
  // 出口文件 缺省为./dist/main.js 在webpack 4.0版本以后也无需配置
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'accIvrSdk.min.js',
    libraryTarget: 'umd',
    library: 'Menu',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader, 'css-loader'],
      },
      {
        test: /\.less$/,
        include: [
          path.resolve(__dirname, '../src/routes'),
          path.resolve(__dirname, '../src/components'),
        ],
        // commonCssLoader与style-loader冲突，两者不能同时使用
        use: [
          ...commonCssLoader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: {
                // 与babel-plugin-react-css-modules generateScopedName路径保持一致
                localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
              },
            },
          },
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.less$/,
        include: [path.resolve(__dirname, '../src/styles')],
        use: [...commonCssLoader, 'css-loader!less-loader?modules'],
      },
      {
        test: /\.scss$/,
        use: [
          ...commonCssLoader,
          'css-loader!sass-loader!@ali/next-theme-loader?theme=@alife/dpl-cdnext',
        ],
      },
      {
        // js|jsx代码兼容性处理
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader', // 7.4.0版本以后需要安装core-js依赖
        options: {
          plugins: ['lodash'], // lodash 按需加载
          presets: [
            [
              '@babel/preset-env', //基础预设
              {
                useBuiltIns: 'usage', // 按需加载
                corejs: {
                  version: 3,
                },
                targets: {
                  // 兼容到什么版本到浏览器
                  chrome: '60',
                  firefox: '50',
                  ie: '9',
                  safari: '10',
                  edge: '17',
                },
              },
            ],
          ],
        },
      },
      {
        test: /\.(png|gif|bmp|jpg|svg)$/,
        include: path.resolve(__dirname, '../src/styles/images/commons'),
        use: {
          loader: 'url-loader',
          options: {
            limit: 8 * 1024,
            // 图片取10位hash和文件扩展名
            name: '[hash:10].[ext]',
            // 关闭es6模块化
            esModule: false,
          },
        },
      },
    ],
  },
  plugins: [
    // css代码单独抽离
    new MiniCssExtractPlugin({
      filename: 'main.min.css',
    }),
    // css代码压缩
    new OptimizeCssAssetsWebpackPlugin(),
    // html文件压缩
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      },
    }),
    // 在每次生成dist文件前先删除，保证最新
    new CleanWebpackPlugin(),
    // lodash按需加载
    new LodashModuleReplacementPlugin(),
    // 按需加载monet语言环境
    new MomentLocalesPlugin({
      localesToKeep: ['es-us'],
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      // 取别名，相对路径
      Components: path.resolve(__dirname, '../src/components'),
      Models: path.resolve(__dirname, '../src/models'),
      Routes: path.resolve(__dirname, '../src/routes'),
      Utils: path.resolve(__dirname, '../src/utils'),
      Styles: path.resolve(__dirname, '../src/styles'),
      Config: path.resolve(__dirname, '../config'),
    },
  },
};

2.webpack.dev.js配置 本地环境

const webpackMerge = require('webpack-merge').merge;
const path = require('path');
const common = require('./webpack.common.js');

const devServerWebpack = webpackMerge(common, {
  /*
  webpack团队引入了一个叫做mode的配置属性来实现零配置(#oCJS)的模块打包。
  mode可以设置为如下值：development和production。开箱即用，默认为production。

  production选项提供了一系列默认配置，它可以：
  更小的输出尺寸
  运行时的快速加载代码
  省略只在开发时的代码
  不暴露源代码或者路径
  快捷使用输出assets

  development选项提供了一下默认配置，它可以：
  浏览器内调试更好的工具
  在一个快速的开发周期，更快的增量编译
  更好的运行时错误提示 
  */

  mode: 'development',
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'accIvrSdk.js',
    libraryTarget: 'umd',
    library: 'Menu',
  },
  devServer: {
    contentBase: path.join(__dirname, '../dist'),
    compress: true,
    port: 9000,
    hot: true,
    open: true,
  },
});
module.exports = devServerWebpack;

3.webpack.prod.js配置 线上环境

const webpackMerge = require('webpack-merge').merge;
const path = require('path');
const common = require('./webpack.common.js');

module.exports = webpackMerge(common, {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'accIvrSdk.min.js',
    libraryTarget: 'umd',
    library: 'Menu',
  },
});

4.babel.config.js bebel配置

配置在根目录下

/* .babelrc 和 babel.config.js啥区别呢 
.babelrc是作用于项目中的某个部分，而babel.config.js是作用于全局的 
https://www.babeljs.cn/docs/configuration */

const genericNames = require('generic-names'); // v3.0.0
const CSS_MODULE_LOCAL_IDENT_NAME =
  '[path]___[name]__[local]___[hash:base64:5]';

module.exports = {
  presets: [
    '@babel/preset-env', // 转化最新语法
    '@babel/preset-react',
  ],
  plugins: [
    [
      // 如果不使用该模块 使用less样式需要className={style.container} 使用该模块以后可以简化为styleName的写法  https://zhuanlan.zhihu.com/p/34748443
      'babel-plugin-react-css-modules',
      {
        exclude: 'node_modules',
        // 必须保持和 css-modules 的 localIdentName 一致的命名
        // https://github.com/gajus/babel-plugin-react-css-modules/issues/291
        // generic-names 用于解决 css-loader v4 hash 的兼容
        // less loader里面配置路径规则一致，没有用genericNames 导致main.min.css 文件和dom生成的css hash不一致问题
        generateScopedName: genericNames(CSS_MODULE_LOCAL_IDENT_NAME),
        filetypes: {
          '.less': {
            syntax: 'postcss-less',
          },
        },
      },
    ],
    '@babel/plugin-transform-runtime', // 运行时引入 generators/async、babel-runtime/core-js（ES6->includes....）不会污染全局环境。
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true,
      },
    ],
    ['@babel/plugin-proposal-private-methods', { loose: true }],
  ],
};

5.package.json 配置

"scripts": {
    "build-sdk-def": "webpack server --config=./webpack/webpack.dev.js --progress",
    "build-sdk-min-def": "webpack --config=./webpack/webpack.prod.js --progress",
},
"devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "autoprefixer": "^7.1.2",
    "babel-loader": "^8.2.2",
    "babel-plugin-lodash": "^3.3.4",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "core-js": "^3.15.2",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.6",
    "extract-text-webpack-plugin": "^2.1.0",
    "generic-names": "^3.0.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.0",
    "lodash-webpack-plugin": "^0.11.6",
    "mini-css-extract-plugin": "^1.6.2",
    "moment-locales-webpack-plugin": "^1.2.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss": "^6.0.1",
    "postcss-less": "^4.0.1",
    "postcss-loader": "^6.1.0",
    "style-loader": "^3.0.0",
    "url-loader": "^4.1.0",
    "webpack": "^5.41.1",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.8.0"
}