webpack-react

使用webpack打包react组件笔记：

自定义一个打包script，在package.json的script里面执行命令: webpack --config ./scripts/build.js

const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const { version, name, description } = require('../package.json');
const config = {
  mode: 'production',

  // 入口
  entry: './src/index.ts',

  // 出口，打umd包
  output: {
    library: name,
    libraryTarget: 'umd',
    umdNamedDefine: true,
    filename: '[name].js'
  },

  //react react-dom do not package
  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  },
 
  resolve: {
    enforceExtension: false,
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss', '.css']
  },

  module: {
    rules: [
      {
        test: /\.(js|ts)[x]?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ],
        exclude: '/node_modules/',
        include: [path.resolve('components')]
      },
      {
        test: /\.(sc|c)ss$/,
        exclude: /\.module\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.module\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
              modules: {}
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'images/[name][hash:8].[ext]'
            }
          }
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        include: /\.min\.js$/,
        parallel: true,
        extractComments: false,
        terserOptions: {
          output: {
            comments: false
          }
        }
      })
    ],
    noEmitOnErrors: true
  },

  plugins: [
    new ProgressBarPlugin(),
    // version info
    new webpack.BannerPlugin(
      ` \n ${name} v${version} \n ${description} \n ${LOGO}\n`
    ),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': 'production',
      __DEBUG__: false
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

module.exports = config;