webpack.js.org/guides/buil…

module.exports = {
  watch: true,
  watchOptions: {
    // 忽略监听的目录或文件
    ignored: /node_modules/,
    // 文件变更后合并build时间间隔
    aggregateTimeout: 300,
    // 检查文件变更时间间隔
    poll: 1000
  },
  // 入口 string | object | array
  // string|array 会变成一个chunk，文件名为main
  // object 多个文件chunk
  entry: "./app/entry",
  // 生成缓存，提升构建速度
  cache: true,
  output: {
    // 全局库变量名
    library: 'someLibName',
    // 打包模式
    libraryTarget: 'umd',
    // libraryTarget添加注释
    auxiliaryComment: 'Test Comment',
    // 如果libraryTarget: 'var'，设置export的入口对象
    libraryExport: 'default',
    // 打包目录
    path: path.resolve(__dirname, 'dist/assets'),
    // 设置公共目录
    publicPath: 'https://cdn.example.com/assets/',
    // 打包文件名
    filename: 'someLibName.js',
    // 按需打包成chunk文件，require.ensure
    chunkFilename: '[id].chunk.js',
  },
  resolve: {
    // 后缀扩展
    extensions: ['.js'],
    // 文件名补齐
    mianFields: ['index'],
    // 加载本地文件（减少编译压缩）
    xyz$: path.resolve(__dirname, 'path/to/file.js'),
    // 搜索模块的目录
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    // 缓存
    unsafeCache: true,
  },
  plugins: [],
  module: {
    // 不解析模块里面引用
    noParse: /jquery|lodash/,
    rules: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        //   include: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {
              'targets': {
                "chrome": "58",
                "ie": "9"
              }
            }],
              '@babel/preset-react',
            ], // babel编译es6以上语法以及jsx语法
            plugins: [
              '@babel/plugin-transform-classes',
              '@babel/plugin-transform-arrow-functions',
              '@babel/plugin-proposal-object-rest-spread',
              '@babel/plugin-proposal-export-default-from'
            ]
          },
        }],
      },
      {
        test: /\.scss$/,
        // exclude: /node_modules/,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          // options: {
          //   publicPath: (resourcePath, context) => {
          //     // publicPath is the relative path of the resource to the context
          //     // e.g. for ./css/admin/main.css the publicPath will be ../../
          //     // while for ./css/main.css the publicPath will be ../
          //     return path.relative(path.dirname(resourcePath), context) + '/';
          //   },
          // },
        	},
          'css-loader',
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                require("autoprefixer")({
                  "browsers": [
                    "> 1%",
                    "last 2 versions",
                    "not ie <= 8"
                  ]
                })
              ]
            }
          },
          'sass-loader',
        ],
     },
     {
       // 图片
       test: /\.(gif|jpg|png|woff|svg|eot|ttf|ico)\??.*$/,
       // loader: 'url-loader?limit=8192'
       loader: 'file-loader',
       options: {
         name: '[path][name].[ext]'
       }
    }],
  },
  // 过滤引用模块，并替换成全局变量名
  externals: {
    react: 'react',
    lodash: {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_' // indicates global variable
    }
  },
  // 优化，压缩、提取公共代码等
  optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: 'all'
    },
    minimizer: [
      new UglifyJsPlugin({
        include: /\/includes/,
      }),
    ],
  }
}

工具

webpack-bundle-analyzer

babel7

env

@babel/preset-env - es6规范语法

Stage

• Stage 0 - Strawman（展示阶段）
• Stage 1 - Proposal（征求意见阶段）
• Stage 2 - Draft（草案阶段）
• Stage 3 - Candidate（候选人阶段）
• Stage 4 - Finished（定案阶段）

// Babel-loader 8.x
"babel-loader"

// Babel-core 7.x
"@babel/core"

// Env
"@babel/preset-env"

// Runtime
"@babel/runtime"
"@babel/plugin-transform-runtime"

// React
"@babel/preset-react"

// Stage 0
"@babel/plugin-proposal-function-bind"

// Stage 1
"@babel/plugin-proposal-export-default-from"
"@babel/plugin-proposal-logical-assignment-operators"
"@babel/plugin-proposal-optional-chaining"
"@babel/plugin-proposal-pipeline-operator"
"@babel/plugin-proposal-nullish-coalescing-operator"
"@babel/plugin-proposal-do-expressions"

// Stage 2
"@babel/plugin-proposal-decorators"
"@babel/plugin-proposal-function-sent"
"@babel/plugin-proposal-export-namespace-from"
"@babel/plugin-proposal-numeric-separator"
"@babel/plugin-proposal-throw-expressions"

// Stage 3
"@babel/plugin-syntax-dynamic-import"
"@babel/plugin-syntax-import-meta"
"@babel/plugin-proposal-class-properties"
"@babel/plugin-proposal-json-strings"

polyfill

增加或修改es6的属性和方法，运行在不兼容浏览器下