webpack优化环境配置 - 23.code split(2)
1.文件结构
2.代码
import $ from 'jquery' function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3, 4, 5, 6)); // eslint-disable-next-line console.log($)
test.js
import $ from 'jquery' // eslint-disable-next-line console.log($) export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </head> <body> <h5>hello catch</h5> </body> </html>
webpack.config.js
const {resolve} = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { //单入口 // entry: './src/js/index.js', //多入口 entry:{ index:'./src/js/index.js', test:'./src/js/test.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', // devtool: 'source-map' }
3.打包
$ webpack
end~