webpack复习总结

首先小小的吐槽一下webpack中文网的网站质量，大部分内容还是介绍的不错的，但是有一些语法以及插件的使用方法还是老版本的，没有更新，导致在跟着敲代码的时候，偶尔会卡住（可能也是个好处吧？哈哈。遇到问题可以多思考找找原版的英文介绍或者其他博客的介绍）。下面总结一下webpack重要常用的概念，以及常用的loader以及插件，作为一个记录。

1.概念

基础的四个部分组成，入口entry，输出output，loader，plugins。以及最实用的HMR（模块热替换）。

2.loader

loader的是转换源码的一个工具，如将ES6转成ES5，将小size图片转成DataURL等。这可以使我们写代码的时候做到高内聚的效果，也可以使组件化的开发更为快捷简单。
常用loader：
css-loader，style-loader，url-loader（处理图片）,babel-loader。loader总览

3.plugins

插件是用来优化构建后的文件的。我们项目中去优化也大部分是通过配置各种各样的插件去实现的。
常用的插件：
clean-webpack-plugin（用来清除构建文件夹上一次构建的文件），html-webpack-plugin（动态生成入口html文件，动态增加入口JS以及CSS，也支持传入项目配置好的入口html路径），webpack-merge（在区分生产环境与开发环境是作为合并通用配置与个性配置方法）,extract-text-webpack-plugin（将css文件抽离成单独的文件而不是引入在页面的head中），SplitChunksPlugin（抽取公共代码，减少总体包体积），definePlugin（定义全局的变量），webpack-dev-middleware与webpack-hot-middleware（实现HMR功能）。

4.问题总结以及注意事项

1.output中的publicPath是一个很灵活重要的配置属性（配置CDN访问路径，以及生产环境与开发环境的访问路径）。
2.webpack-hot-middleware使用需要重新设置一遍入口选项，考虑到多入口情况，常见简单实现方法如下：

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const entries = config.entry;
Object.keys(entries).forEach(entryKey => {
  config.entry[entryKey] = ['webpack-hot-middleware/client?noInfo=true&reload=true',entries[entryKey]]
})
const compiler = webpack(config);
// console.log( compiler)
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

3.webpack4.x以后移除了之前的commonsChunkPlugin插件，引入了splitChunksPlugin，其中最重要的cacheGroups要好好掌握。常见配置：（实现提取node-modules中的公用模块）,贴个讲的比较好的博客

 optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          minSize: 30000,
          minChunks: 1,
          chunks: 'initial',
          priority: 1 // 该配置项是设置处理的优先级，数值越大越优先处理
        }
      }
    }
  },

4.externals使用
利用externals配置体积大的插件依赖项，可以减少打包后的体积，可以减少资源加载的时间，通过配置cnd链接，可以控制2~3个cdn域名下的资源，这样可以并行加载。