webpack 的一点知识
多个入口共享多个模块
在使用webpack搭建多页面应用时候需要多个入口，这个时候需要考虑到模块共享问题了
可以使用entry.dependOn 来处理
entry: {home: {import: "./pages/home/index.js",// 其中vendors里边使用到模块，不会打入home对应的chunk当中了dependOn: 'vendors'},articles_detail: "./pages/articles/detail.js",articles_index: "./pages/articles/index.js",about: "./pages/mine/about/index.js",album: "./pages/mine/album/index.js",navigation: "./pages/navigation/index.js",// 共享的入口vendors: ['jquery'],},
需要处理的问题
记得引入的html文件，其中chunks需要有vendors 否则不会被引入html文件，但是如果不写chunks，则所有的chunk都会被引入该html文件
new HtmlWebpackPlugin({template: path.join(__dirname, "src/pages/home/index.html"),filename: "pages/home.html",chunks: ["home", "vendors"],title: '首页',conpress: true}),
给单独某个入口指定chunk名称
可以通过里边的filename来指定
home: {import: "./pages/home/index.js",filename: 'pages/home/[name].js',dependOn: 'vendors'},
给所有的模块输出默认路径
output: {// 这个是指定了所有资源的输出基本路径path: __dirname + '/dist',// 指定所有chunk默认路径 优先级低于单独给某个入口设置filename: 'script/[name].js',// 导出的通过asset资源管理 输出的文件放的位置assetModuleFilename: './images/[hash][ext][query]'},
给资源管理文件单独设置输出位置
{ // 图片文件test: /\.(png|jpe?g|webp|gif)$/, type: 'asset',generator: {filename: 'static/images/[hash][ext][query]'}
},
{ // 字体等文件test: /\.(eot|svg|ttf|woff2?)$/,type: "asset/resource",generator: {filename: "static/media/[hash:8][ext][query]",},
}
output.publicPath
在将资源放在其他服务器或者cdn托管时候，可以指定路径
Rule.enforce
在对其中loader进行匹配处理时候，
Normal 阶段: loader 上的 常规方法，会按照 前置(pre)、普通(normal)、行内(inline)、后置(post)类别的loader进行 顺序调用。模块源码的转换， 发生在这个阶段
我们可以通过将一个loader 的enforce 指定为pre 让他优先处理模块
// 禁用前置和普通 loaders
import { b } from '-!./file2.js';
output.clean
可以在打包输出之前先清理dist目录，而 clean-webpack-plugin可以选择性的清理，一般情况下设置clean 即可
Rule.generator
publicPath 跟output.publicPath一样都是指定输出的内容前面的字符串
generator.outputPath 指定相对于 output.path 的路径，当然如果没有指定generator.outputPath
直接将filename写成
filename: 'static/images/[hash][ext][query]'
也是可以创建目录的
{ // 图片文件test: /\.(png|jpe?g|webp|gif)$/, type: 'asset/resource',generator: {outputPath: 'static/images',publicPath: 'fuck',filename: '[hash][ext][query]'}
},
生成的连接
<img src="fuck88f068a97a175bca5524.png" alt="">
但是存在一个问题（我目前也不知道怎么解决）：
如果将目录结构写在outputPath 这个只是将资源放在指定的目录结构里边，但是，路径上并没有携带上这个目录结构，所以需要指定publicPath，
比如将dist作为网站根目录
publicPath: '/static/images/',outputPath: 'static/images',filename: '[hash][ext][query]'
如果直接将目录卸载filename里边，则创建了目录同时也能正确引入目录结构