网站建设什么时候好,自己开平台怎么弄啊,网站开发系统学习,东莞公司注册价格多个入口共享多个模块
在使用webpack搭建多页面应用时候需要多个入口#xff0c;这个时候需要考虑到模块共享问题了 可以使用entry.dependOn 来处理
entry: {home: {import: ./pages/home/index.js,// 其中vendors里边使用到模块#xff0c;不会打入home对应的…多个入口共享多个模块
在使用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 srcfuck88f068a97a175bca5524.png alt但是存在一个问题我目前也不知道怎么解决 如果将目录结构写在outputPath 这个只是将资源放在指定的目录结构里边但是路径上并没有携带上这个目录结构所以需要指定publicPath
比如将dist作为网站根目录 publicPath: /static/images/,outputPath: static/images,filename: [hash][ext][query]如果直接将目录卸载filename里边则创建了目录同时也能正确引入目录结构
