demo3 · 前端

webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // 單入口 entry: './src/js/index.js', output: { // [name]：取文件名 filename: 'js/[name].[contenthash:10].js', path: resolve(__dirname, 'build') }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', minify: { collapseWhitespace: true, removeComments: true } }) ], /* 1. 可以將node_modules中代碼單獨打包一個chunk最終輸出 2. 自動分析多入口chunk中，有沒有公共的文件。如果有會打包成單獨一個chunk */ optimization: { splitChunks: { chunks: 'all' } }, mode: 'production' }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1>hello cache</h1> </body> </html> ``` src/js/index.js ``` function sum(...args) { return args.reduce((p, c) => p + c, 0); } /* 通過js代碼，讓某個文件被單獨打包成一個chunk import動態導入語法：能將某個文件單獨打包 */ import(/* webpackChunkName: 'test' */'./test') .then(({ mul, count }) => { // 文件加載成功~ // eslint-disable-next-line console.log(mul(2, 5)); }) .catch(() => { // eslint-disable-next-line console.log('文件加載失敗~'); }); // eslint-disable-next-line console.log(sum(1, 2, 3, 4)); ``` src/js/test.js ``` export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; } ```