原生js+多个静态页面打包(webpack) |
您所在的位置：网站首页 › webpack多文件打包 › 原生js+多个静态页面打包(webpack) |
原生js+多个静态页面打包(webpack)
|
最近做了一个仿阿里的页面,想要试试打包,结果由于html页面比较多,每个html页面引入的css,js各有不同,不能只引入一个index.js打包,因为一个index.js会导致命名冲突,样式覆盖 解决方案:1.建立多个入口文件,不同的html引入各自的js和css文件即可,如下:
4.最后配置html的时候要注意,需要添加chunk的选项 最后,希望大家顺利打包 源码也贴出来(webpack.config.js的配置) // webpack.config.js是webpack的配置文件 // resolve是path模块中内置的一个用来拼接绝对路径的方法 const { resolve } = require("path"); // 注意注意注意, 需要引入插件 const HtmlWebpackPlugin = require("html-webpack-plugin"); const { options } = require("less"); /* loader的使用步骤: 1. 下载 2. 配置 plugins的使用步骤: 1. 下载 2. 引入 3.使用 */ module.exports = { // 入口 entry:{ './js/index': "./src/nav/index.js", './js/icon': "./src/nav/icon.js", './js/resource': "./src/nav/resource.js", './js/help': "./src/nav/help.js", './js/inbetweening': "./src/nav/inbetweening.js", './js/active':'./src/nav/active.js', './js/help_other':'./src/nav/help-other.js', './js/font':'./src/nav/font.js' }, // 输出 output:{ environment: { // The environment supports arrow functions ('() => { ... }'). // 环境支持箭头函数('()=>{…}”)。 arrowFunction: false, // The environment supports BigInt as literal (123n). // 该环境支持将BigInt作为文字(123n)。 bigIntLiteral: false, // The environment supports const and let for variable declarations. // 环境支持使用const和let声明变量。 const: false, // The environment supports destructuring ('{ a, b } = obj'). destructuring: false, // The environment supports an async import() function to import EcmaScript modules. // 该环境支持async import()函数来导入EcmaScript模块。 dynamicImport: false, // The environment supports 'for of' iteration ('for (const x of array) { ... }'). // 该环境支持'for of' iteration ('for (const x of array){…}”) forOf: false, // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...'). // 该环境支持ECMAScript Module语法来导入ECMAScript模块 module: false, }, // 输出文件名 //filename:"built.js", // 输出路径 // __dirname是nodejs中的变量,代表当前文件所在目录对应的绝对路径 //path: resolve(__dirname, "build") filename: "[name].js", path: resolve(__dirname, "build") }, // loader的配置 module:{ rules:[ // 详细的loader配置 // 加载css资源文件 { // test属性表示匹配哪些文件,属性取值一般是一个正则表达式 test:/\.css$/, // use表示使用哪些loader进行处理 use:[ // use数组中的loader执行顺序是: 从右到左或从下到下,依次执行的 // 创建style标签,将js中的样式资源插入这个style标签中,再把style标签添加到页面head标签中生效 "style-loader", // 将css文件变成commonjs模块加载到js文件中,里面内容是样式字符串 "css-loader", // 配置postcss自动添加css的兼容前缀 "postcss-loader" ] }, // 处理CSS中的背景图片资源 { test: /\.(jpg|jpeg|png|gif|bmp|webp)$/, type:"asset", //解析 parser: { // 转base64的条件 // 图片大小如果小于8kb,就会被base64处理 // base64的优点:减少请求数量,减轻服务器压力 // base64的缺点:图片体积会更大,文件请求速度更慢 dataUrlCondition: { maxSize: 8 * 1024, // 8kb } }, generator:{ //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径 // 给图片进行重命名 [hash:10]取图片的hash的前10为,[ext]取文件原来的扩展名 filename:'img/[hash:10][ext]', //打包后对资源的引入，文件命名已经有/images了 publicPath:'./' }, }, // 专门处理html文件中的img图片（负责引入img，从而能被asset资源模块进行图片资源处理） { test: /\.(html)$/, // 需要安装html-loader 命令: npm i html-loader -D loader:'html-loader' }, // 处理字体文件资源 { test: /\.(ttf|eot|svg|woff|woff2)$/, type:"asset", //解析 parser: { // 转base64的条件 // 字体文件大小如果小于1kb,就会被base64处理 // base64的优点:减少请求数量,减轻服务器压力 // base64的缺点:图片体积会更大,文件请求速度更慢 dataUrlCondition: { maxSize: 1 * 1024, // 1kb } }, generator:{ //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径 // 给字体文件进行重命名 [hash:10]取字体文件的hash的前10为,[ext]取文件原来的扩展名 // [name]表示原来的文件名字 filename:"fonts/[name]_[hash:10][ext]", //打包后对资源的引入，文件命名已经有/fonts了 publicPath:"./" } }, // 处理js文件的loader { test: /\.js$/, // exclude 表示哪些目录中的.js文件不要进行 babel-loader exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } } // { // test:/\.(png|svg|jpg|gif)$/, // use: [{ // loader:'file-loader', // loader:'url-loader', // options: { // outputPath: './images', // publicPath: './img', // } // }] // } ] }, // plugins的配置 plugins:[ // 详细plugins的配置 // 使用html-webpack-plugin插件,默认会创建一个空的HTML文件,"自动引入"打包输出的所有资源资源,比如js,css等 //index new HtmlWebpackPlugin({ // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源 // 特别说明, 这个src目录下的index.html是需要我们自己手动创建的 template:"./src/index.html", // 所有JavaScript资源插入到body元素的底部 inject: "body", // filename: 输出模板名称, 默认为index.html filename: "index.html", // 通过minify属性可以压缩html文件 minify:{ // 移除空格 collapseWhitespace:true, // 移出注释 removeComments:true, }, // 设置favicon.icon文件(其实就是告诉我们,favicon.ico源文件所在路径) favicon: "./src/favicon.ico", chunks: ['./js/index'] }), //icon new HtmlWebpackPlugin({ // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源 // 特别说明, 这个src目录下的index.html是需要我们自己手动创建的 template:"./src/icon.html", // 所有JavaScript资源插入到body元素的底部 inject: "body", // filename: 输出模板名称, 默认为index.html filename: "icon.html", // 通过minify属性可以压缩html文件 minify:{ // 移除空格 collapseWhitespace:true, // 移出注释 removeComments:true, }, // 设置favicon.icon文件(其实就是告诉我们,favicon.ico源文件所在路径) favicon: "./src/favicon.ico", chunks: ['./js/icon'] }), //resource new HtmlWebpackPlugin({ // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源 // 特别说明, 这个src目录下的index.html是需要我们自己手动创建的 template:"./src/resource.html", // 所有JavaScript资源插入到body元素的底部 inject: "body", // filename: 输出模板名称, 默认为index.html filename: "resource.html", // 通过minify属性可以压缩html文件 minify:{ // 移除空格 collapseWhitespace:true, // 移出注释 removeComments:true, }, // 设置favicon.icon文件(其实就是告诉我们,favicon.ico源文件所在路径) favicon: "./src/favicon.ico", chunks: ['./js/resource'] }), //help new HtmlWebpackPlugin({ // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源 // 特别说明, 这个src目录下的index.html是需要我们自己手动创建的 template:"./src/help.html", // 所有JavaScript资源插入到body元素的底部 inject: "body", // filename: 输出模板名称, 默认为index.html filename: "help.html", // 通过minify属性可以压缩html文件 minify:{ // 移除空格 collapseWhitespace:true, // 移出注释 removeComments:true, }, // 设置favicon.icon文件(其实就是告诉我们,favicon.ico源文件所在路径) favicon: "./src/favicon.ico", chunks: ['./js/help'] }), //inbetweening new HtmlWebpackPlugin({ // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源 // 特别说明, 这个src目录下的index.html是需要我们自己手动创建的 template:"./src/inbetweening.html", // 所有JavaScript资源插入到body元素的底部 inject: "body", // filename: 输出模板名称, 默认为index.html filename: "inbetweening.html", // 通过minify属性可以压缩html文件 minify:{ // 移除空格 collapseWhitespace:true, // 移出注释 removeComments:true, }, // 设置favicon.icon文件(其实就是告诉我们,favicon.ico源文件所在路径) favicon: "./src/favicon.ico", chunks: ['./js/inbetweening'] }), // active new HtmlWebpackPlugin({ // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源 // 特别说明, 这个src目录下的index.html是需要我们自己手动创建的 template:"./src/active.html", // 所有JavaScript资源插入到body元素的底部 inject: "body", // filename: 输出模板名称, 默认为index.html filename: "active.html", // 通过minify属性可以压缩html文件 minify:{ // 移除空格 collapseWhitespace:true, // 移出注释 removeComments:true, }, // 设置favicon.icon文件(其实就是告诉我们,favicon.ico源文件所在路径) favicon: "./src/favicon.ico", chunks: ['./js/active'] }), // help-chahua new HtmlWebpackPlugin({ // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源 // 特别说明, 这个src目录下的index.html是需要我们自己手动创建的 template:"./src/help-other.html", // 所有JavaScript资源插入到body元素的底部 inject: "body", // filename: 输出模板名称, 默认为index.html filename: "help-other.html", // 通过minify属性可以压缩html文件 minify:{ // 移除空格 collapseWhitespace:true, // 移出注释 removeComments:true, }, // 设置favicon.icon文件(其实就是告诉我们,favicon.ico源文件所在路径) favicon: "./src/favicon.ico", chunks: ['./js/help_other'] }), // font new HtmlWebpackPlugin({ // template可以指定复制 "./src/index.html" 的页面结构 , 并自动引入打包输出的所有资源资源 // 特别说明, 这个src目录下的index.html是需要我们自己手动创建的 template:"./src/font.html", // 所有JavaScript资源插入到body元素的底部 inject: "body", // filename: 输出模板名称, 默认为index.html filename: "font.html", // 通过minify属性可以压缩html文件 minify:{ // 移除空格 collapseWhitespace:true, // 移出注释 removeComments:true, }, // 设置favicon.icon文件(其实就是告诉我们,favicon.ico源文件所在路径) favicon: "./src/favicon.ico", chunks: ['./js/font'] }) ], // 开发模式 mode:"development", // 生成模式,就可以把打包好的js文件代码压缩成一行 mode:"production", // devServer的配置 devServer: { // 项目构建后的路径 static: { directory: resolve(__dirname, 'build'), }, // 启动gzip压缩 可以加速 compress: true, // 端口号 port: 9000, // 自动打开系统默认浏览器 open:true } } |
2.入口这些js文件都要自己创建的,路径可以跟我不一样,但是不要搞错了,如下图,这是我们首页需要引入的css和js,要先写css文件,再写js文件,不要css和js混写在一起,容易出现问题
3.改变输出文件的文件名,既然我们的输入文件有很多了,那自然打包的输出文件不能全都在一起 
注意注意注意:一定要打中括号,不然所有的入口文件都会引入到单独的html页面中,重要的事情说三遍,为了这个中括号,我花了半小时找bug【本文地址】
今日新闻 |
推荐新闻 |