│  .babelrc
│  .gitignore
│  package-lock.json
│  package.json
│  README.en.md
│  README.md
│      
├─build
│      webpack.common.js
│      webpack.dev.js
│      webpack.prod.js
│      webpack.rules.js
│                
└─src
    ├─assets
    │      test.json
    │      
    ├─common
    │  ├─css
    │  ├─fonts
    │  ├─images
    │  └─js
    └─pages
        ├─my
        │      index.html
        │      index.js
        │      index.styl
        │      
        └─other
                index.html
                index.js
                index.styl
                

//common
module.exports = (env) => {
  return {
    entry: {},
    plugins: [],
    optimization: {},
    module: {}
  }
};

//dev
module.exports = merge(common(‘development‘), {
  mode: ‘development‘,   
  devtool: ‘inline-source-map‘,
  output: {},
  devServer: {},
  plugins: [],
});

//prod
module.exports = merge(common(‘production‘), {
  mode: ‘production‘, 
  output: {},
  plugins: [
  ],
});

    entry: {
      // 多入口文件
      my: [
        ‘./src/pages/my/index.js‘,
      ],
      other: [
        ‘./src/pages/other/index.js‘,
      ]
    },

/*可多页面配置*/
const htmlArray = [
  {
    _html: ‘my‘,
    title: ‘我的首页‘,
    // chunks: [‘my‘]
  },
  {
    _html: ‘other‘,
    title: ‘其他‘,
    // chunks: [‘other‘]
  }
];
// 获取html-webpack-plugin参数的方法
let getHtmlConfig = function (name, title, globalEnv) {
  return {
    template: `./src/pages/${name}/index.html`,
    filename: `${name}.html`,
    // favicon: ‘./favicon.ico‘,
    title: title,
    inject: true,
    hash: false, //开启hash  ?[hash]

    /*chunk 里面配置的文件才会在html中引入，所以有其他引入的话要注意加上，
    比如runtime和splitChunks里面的vendor等，建议不要这个，默认加载所有的*/
    // chunks: chunks,

    minify: globalEnv === "development" ? false : {
      removeComments: true, //移除HTML中的注释
      collapseWhitespace: true, //折叠空白区域 也就是压缩代码
      removeAttributeQuotes: true, //去除属性引用
    },
  };
};

      //自动生成html模板
      ...htmlArray.map((element) => {
        return new HtmlWebpackPlugin(getHtmlConfig(element._html, element.title, env));
      }),

    plugins: [

      //自动生成html模板
      ...htmlArray.map((element) => {
        return new HtmlWebpackPlugin(getHtmlConfig(element._html, element.title, env));
      }),

      // 消除冗余的css代码
      new PurifyCssWebpack({
        paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))
      }),

      //静态资源输出
      new CopyWebpackPlugin([{
        from: path.resolve(__dirname, "../src/assets"),
        to: ‘./assets‘,
        ignore: [‘.*‘]
      }]),


    ],

  plugins: [
    //热更新，配合devserver服务完全启动HMR
    new webpack.HotModuleReplacementPlugin(),

    // new BundleAnalyzerPlugin(),     //性能优化 高大上的可视化分析模块
  ],

  plugins: [

    /*删除dist目录，2.0后默认了output的path，这里无需填写*/
    new CleanWebpackPlugin({
      root: path.resolve(__dirname, ‘../‘), //根目录
      // verbose Write logs to console.
      verbose: true, //开启在控制台输出信息
    }),

    /*webpack用这个代替ExtractTextPlugin，提取,开发环境我没分离*/
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: ‘[name].[contenthash].css‘,
      // chunkFilename: ‘[id].[contenthash].css‘,
    }),
    //压缩css
    new OptimizeCSSPlugin(),

  ],

    /*代码分离 压缩，webpack4x集成部分插件和选项*/
    optimization: {
      /*压缩js代码入口，是否开启minimizer，
       例如TerserWebpackPlugin插件，性能比UglifyJSPlugin好
       默认引入生产模式为true,所以不用操作，可以手动开启和调节minimizer选项*/
      // minimize: false

      /*将运行时代码拆分为单独的块。
       将其设置single为为所有块创建单个运行时包
       单页面
       runtimeChunk: ‘single‘,
       */

      /*多页面别名*/
      runtimeChunk: {
        name: entryPoint => `runtimechunk~${entryPoint.name}`
      },
      /*分离公共代码*/
      splitChunks: {
        /*缓存chunk 提取公共模块复用*/
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: ‘vendors‘,
            chunks: ‘all‘
          }
        }
      },
    },

  devServer: {
    contentBase: path.join(__dirname, "../dist"),
    publicPath:‘/‘,
    host: "127.0.0.1",
    port: "5199",
    overlay: true, // 浏览器页面上显示错误
    // open: true, // 开启浏览器  open: ‘Google Chrome‘
    // stats: "errors-only", //stats: "errors-only"表示只打印错误：
    hot: true, // 开启热更新
    // compress: true,   //开启gzip
  },

  output: {
    path: path.resolve(__dirname, ‘../dist‘),
    // 打包多出口文件
    // 生成 a.bundle.[hash].js  b.bundle.[hash].js
    // hash工程级整个是一样的，chunkhash模块级有依赖的文件是一样的，contenthash根据自身的内容生成hash，每个文件都不一样
    filename: ‘./js/[name].[contenthash].js‘,
    publicPath: ‘./‘
  },

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}