webpack 中某些配置

Posted 2020-10-19 lmy_moonsky

webpack 每次配置后，过段时间不用就会遗忘，简单记录下最近用webpakc遇到的问题，重拾记忆。

1、入口文件

module.exports = {
  entry: ‘a.js‘,  // 单个入口文件
  output: {
    path: ‘‘,
    publicPath: ‘‘,
    filename: ‘[name].js‘
  }
}

module.exports = {
  entry: {
    index:[‘a.js‘, ‘b.js‘, ‘c.js‘]
  },  // 单个入口文件(将 a.js b.js c.js 文件合并成一个文件)
  output: {
    path: ‘‘,
    publicPath: ‘‘,
    filename: ‘[name].js‘
  }
}

module.exports = {
  entry: {  // 多入口文件
    a:‘a.js‘,
    b: [‘b.js‘, ‘c.js‘],
    c:‘c.js‘,
  },
  output: {
    path: ‘‘,
    publicPath: ‘‘,
    filename: ‘[name].js‘
  }
}

 

2、输出多个文件，并且自动在 html 中引入相应的 js 文件

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

var htmlTmp = {
  index: ‘index‘,
  list: ‘list‘,
  details: ‘details‘
}

module.exports= {
  plugins = []
}

Object.keys(htmlTmp).forEach(name => {
  var plugin = new HtmlWebpackPlugin({
    filename: name + ‘.html‘,  // 生成的文件名
    template: name + ‘.html‘,  // 模板文件
    chunks: [name],  // 为每个页面只引入对应的 js 文件（一定要有的属性）
    chunksSortMode: "dependency"  // 根据依赖顺序加载文件，否则会出现加载问题（一定要有的属性）

  }); webpackConfig.plugins.push(plugin); }); // 结果： 如果入口文件分别是 index.js list.js details.js,则会将三个文件分别插入 index.html list.html details.html 中

 

3、如果把所有文件合成一个 js 文件，那么会有些公用的库，我们不需要每次改动一点点别的文件，就要重新加载一次库文件（因为版本戳变了呀），怎魔办？

拆分啊，用 commonsChunkPlugin 分割代码：

在理解CommonsChunkPlugin代码分割之前，我们需要熟悉webpack中chunk的概念，webpack将多个模块打包之后的代码集合称为chunk。根据不同webpack配置，chunk又有如下几种类型：

• Entry Chunk: 包含一系列模块代码，以及webpack的运行时(Runtime)代码，一个页面只能有一个Entry Chunk，并且需要先于Normal Chunk载入
• Normal Chunk: 只包含一系列模块代码，不包含运行时(Runtime)代码。

// 提取代码库

var webpack = require("webpack");
module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["lodash","jquery"],
  },
  output: {
    path: "release",
    filename: "[name].[chunkhash].js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({names: ["vendor"]})
  ]
};

// 上述配置将常用库打包到一个vender命名的Entry Chunk，并将以app.js为入口的业务代码打包到一个以business命名的Normal Chunk。其中Entry Chunk包含了webpack的运行时(Runtime)代码，所以在页面中必须先于业务代码加载。

 

// 提取共有代码
var webpack = require("webpack");
module.exports = {
    entry: { 
          page1: "./page1.js", 
          page2: "./page2.js" 
        },
    output: { 
          filename: "[name].[chunkhash].js" 
        },
    plugins: [ new webpack.optimize.CommonsChunkPlugin("common.[chunkhash].js") ]
}

// 上述配置将两个页面中通用的代码抽取出来并打包到以common命名的Entry Chunk，并将以page1.js和page2.js为入口代码分别打包到以page1和page2命名的Normal Chunk。 
// 其中Entry Chunk包含了webpack的运行时(Runtime)代码，所以common.[chunkhash].js在两个页面中都必须在page1.[chunkhash].js和page2.[chunkhash].js前加载。


// --------------
// 在这种配置下，CommonsChunkPlugin的作用可以抽象：将多个入口中的公有代码和Runtime(运行时)抽取到父节点
// 将多个入口中的公有代码和Runtime(运行时)抽取到父节点

var webpack = require("webpack");
module.exports = {
    entry: {
        p1: "./page1",
        p2: "./page2",
        p3: "./page3",
        ap1: "./admin/page1",
        ap2: "./admin/page2"
    },
    output: {
        filename: "[name].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
        new webpack.optimize.CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
    ]
};

// 每一次使用CommonsChunkPlugin都会将共有代码和runtime提取到父节点。上述例子中，通过两次CommonChunkPlugin的作用，runtime被提取到common.js中。
// 通过这种树型结构，我们可以清晰的看出每个页面对各个chunk的依赖顺序。

// --------------

// 问题：本意就是在只修改业务代码时，而不改动库代码时，打包出的库代码的chunkhash也发生变化，导致浏览器端的长缓存机制失效。

// 方案：提取 runtime （运行时）代码

var webpack = require("webpack");
module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["lodash","jquery"],
  },
  output: {
    path: ‘release‘,
    filename: "[name].[chunkhash].js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({names: [‘vendor‘,‘runtime‘]}),
  ]
};
// 这种情况下，当业务代码发送变化，而库代码没有改动时，vender的chunkhash不会变，这样才能最大化的利用浏览器的缓存机制

 

4、说说我遇到的问题，如果在 输出的 html文件中引入公共 js（如：生成的 a.html 只引入了 a.js，b.html 只引入了 b.js ，想把vendor.js 和 manifest.js 也分别引入到 a.html 和 b.html 中），如下：

Object.keys(htmlTmp).forEach(name => {
  var plugin = new HtmlWebpackPlugin({
    filename: name + ‘.html‘,
    template: name + ‘.html‘,
    chunks: [name, ‘vendor‘, ‘manifest‘],
    chunksSortMode: "dependency"
  });

  webpackConfig.plugins.push(plugin);

});

// 把 vendor.js 和 manifest.js 都引入生成的 html 中
// chunks: [name, ‘vendor‘, ‘manifest‘], 把页面中需要的文件放进数组
// chunksSortMode: "dependency"， 按依赖顺序引入