代刷业务网站建设,深圳好客站seo,网页设计入门书,免费短视频制作1.module,chunk,bundle的区别
moudle - 各个源码文件#xff0c;webpack中一切皆是模块chunk - 多模块合并成的#xff0c;如entry, import(), splitChunkbundle - 最终的输出文件
2.多文件打包配置
2.1 webpack.common.js const path require(path)
const HtmlWebpackPl…1.module,chunk,bundle的区别
moudle - 各个源码文件webpack中一切皆是模块chunk - 多模块合并成的如entry, import(), splitChunkbundle - 最终的输出文件
2.多文件打包配置
2.1 webpack.common.js const path require(path)
const HtmlWebpackPlugin require(html-webpack-plugin)
const { srcPath, distPath } require(./paths)module.exports {entry: {index: path.join(srcPath, index.js),other: path.join(srcPath, other.js)},module: {rules: [// ----- 同上文 ----]},plugins: [// 多入口 - 生成 index.htmlnew HtmlWebpackPlugin({template: path.join(srcPath, index.html),filename: index.html,// chunks 表示该页面要引用哪些 chunk 即上面的 index 和 other默认全部引用// chunks: [index] // 只引用 index.js}),// 多入口 - 生成 other.htmlnew HtmlWebpackPlugin({template: path.join(srcPath, other.html),filename: other.html,// chunks: [other] // 只引用 other.js})]
}上面的chunks配置如果不配置chunks那么打包出来的结果是默认引入全部js
bodypwebpack demo/pinput typetext/script typetext/javascript srcindex.js/scriptscript typetext/javascript srcother.js/script
/body如果配置了chunks那么就只引入对应的结果
bodypwebpack demo/pinput typetext/script typetext/javascript srcindex.js/script
/body2.2 webpack.prod.js
const path require(path)
const webpack require(webpack)
const { CleanWebpackPlugin } require(clean-webpack-plugin)
const webpackCommonConf require(./webpack.common.js)
const { smart } require(webpack-merge)
const { srcPath, distPath } require(./paths)module.exports smart(webpackCommonConf, {mode: production,output: {// filename: bundle.[contentHash:8].js, // 打包代码时加上 hash 戳filename: [name].[contentHash:8].js, // name 即多入口时 entry 的 keypath: distPath,// publicPath: http://cdn.abc.com // 修改所有静态文件 url 的前缀如 cdn 域名这里暂时用不到},module: {rules: [//代码重复]},plugins: [new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹new webpack.DefinePlugin({// window.ENV productionENV: JSON.stringify(production)})]
})多入口时output出口的【name】变量会对应到入口的变量名
