前端开发 webpack 通用配置

以后公司前端新项目 webpack 可以选择使用这一套通用配置，该配置满足了一下诸多功能。

使用者可以自己定义一些 loader 以及 plugin 以满足日常开发需要，在下面给出详细的注释以便理解与使用。（开发时可以把注释删掉）

- webpack.base.js

// webpack.base.js用于通用的 webpack 配置

// 自动适配浏览器前缀
const autoprefixer = require('autoprefixer');
// 用于多页面入口打包，
const glob = require('glob');
// 获取路径
const path = require('path');
// 自动清除输出目录插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
// webpack 打包出错 terminal log 插件
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
// 引入外部资源，申生成入口插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 将 CSS 提取为独立的文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 获取项目根目录
const projectRoot = process.cwd();

// 多页面应用入口程序，通过匹配获取对应页面入口，单页面可以直接定义 entry 就行
const setMPA = () => {
  const entry = {};
  const htmlWebpackPlugins = [];
  const entryFiles = glob.sync(path.join(projectRoot, './src/*/index.js'));

  Object.keys(entryFiles)
    .map((index) => {
      const entryFile = entryFiles[index];
      // '/Users/buzhuo/my-project/src/index/index.js'
      const match = entryFile.match(/src/(.*)/index.js/);
      const pageName = match && match[1];
      entry[pageName] = entryFile;
      return htmlWebpackPlugins.push(
        new HtmlWebpackPlugin({
          inlineSource: '.css$',
          template: path.join(projectRoot, `./src/${pageName}/index.html`),
          filename: `${pageName}.html`,
          chunks: ['vendors', pageName],
          inject: true,
          minify: {
            html5: true,
            collapseWhitespace: true,
            preserveLineBreaks: false,
            minifyCSS: true,
            minifyJS: true,
            removeComments: false,
          },
        })
      );
    });
// 返回入口以及入口对应的 htmlWebpackPlugins
  return {
    entry,
    htmlWebpackPlugins,
  };
};

const { entry, htmlWebpackPlugins } = setMPA();

module.exports = {
  entry: entry,
  output: {
    path: path.join(projectRoot, 'dist'),
    filename: '[name]_[chunkhash:8].js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ],
      },
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
          {
            // CSS预处理
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                autoprefixer({
                  browsers: ['last 2 version', '>1%', 'ios 7'],
                }),
              ],
            },
          },
          {
            // px 自动转换为 rem 移动端，若无移动端需求该 loader 可删去
            loader: 'px2rem-loader',
            options: {
              remUnit: 75,
              remPrecision: 8,
            },
          },
        ],
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8].[ext]',
            },
          },
        ],
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name]_[hash:8][ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css',
    }),
    new CleanWebpackPlugin(),
    new FriendlyErrorsWebpackPlugin(),
    function errorPlugin() {
      this.hooks.done.tap('done', (stats) => {
      if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') === -1) {
          process.exit(1);
      }
      });
    },
  ].concat(htmlWebpackPlugins),
  // webpack 在打包时仅出错才会输出到 terminal，具体参数可到https://webpack.js.org/查看
  stats: 'errors-only',
};

- webpack.dev.js

// merge 用来合并 webpack.base.js 与 webpack.dev.js
const merge = require('webpack-merge');
const webpack = require('webpack');
const baseConfig = require('./webpack.base');

const devConfig = {
  mode: 'production',
  plugins: [
    // 生产环境下开启热加载插件
    new webpack.HotModuleReplacementPlugin(),
  ],
devServer: {
    // 指定 devServer 相关，在此可以指定 port 等配置
  contentBase: './dist',
    hot: true,
    stats: 'errors-only',
  },
  // 该参数见下图
  devtool: 'cheap-source-map',
};

module.exports = merge(baseConfig, devConfig);

- webpack.prod.js

webpack 4.0 以上将 uglifyjs 与 treeshaking 设为 webpack 默认，只要设置mode = production 就默认开启

// css 压缩插件
const cssnano = require('cssnano');
  // merge webpack.dev.js 与 webpack.prod.js
const merge = require('webpack-merge');
  // 用于 cdn 加速 react，引用外部资源
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
  // 提取 css 到单独文件并且压缩 css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  // 前面提到的基本配置
const baseConfig = require('./webpack.base');

const prodConfig = {
  mode: 'production',
  plugins: [
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /.css$/g,
      cssProcessor: cssnano,
    }),
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'react',
          entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
          global: 'React',
        },
        {
          module: 'react-dom',
          entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
          global: 'ReactDOM',
        },
      ],
    }),
  ],
  // code split
  optimization: {
    splitChunks: {
    minSize: 0,
      cacheGroups: {
        commons: {
          name: 'vendors',
          chunks: 'all',
          minChunks: 2,
        },
      },
    },
  },
};

module.exports = merge(baseConfig, prodConfig);

所需依赖

autoprefixer
babel-loader
clean-webpack-plugin
css-loader
cssnano
eslint-loader
file-loader
friendly-errors-webpack-plugin
glob
html-inline-css-webpack-plugin
html-loader
html-webpack-externals-plugin
html-webpack-inline-source-plugin
html-webpack-plugin
less
less-loader
mini-css-extract-plugin
node-notifier
optimize-css-assets-webpack-plugin
postcss-loader
postcss-preset-env
px2rem-loader
raw-loader
react
react-dom
style-loader
uglifyjs-webpack-plugin
url-loader
webpack
webpack-cli
webpack-merge

执行命令

在项目根目录下的 package.json 的 scripts 里新增脚本：

开发环境 && 生产环境

"dev": "webpack-dev-server --config webpack.dev.js --open",
"build": "webpack --config webpack.prod.js",