最近做了一个仿阿里的页面,想要试试打包,结果由于html页面比较多,每个html页面引入的css,js各有不同,不能只引入一个index.js打包,因为一个index.js会导致命名冲突,样式覆盖
解决方案:
1.建立多个入口文件,不同的html引入各自的js和css文件即可,如下:
2.入口这些js文件都要自己创建的,路径可以跟我不一样,但是不要搞错了,如下图,这是我们首页需要引入的css和js,要先写css文件,再写js文件,不要css和js混写在一起,容易出现问题
3.改变输出文件的文件名,既然我们的输入文件有很多了,那自然打包的输出文件不能全都在一起
4.最后配置html的时候要注意,需要添加chunk的选项
注意注意注意:一定要打中括号,不然所有的入口文件都会引入到单独的html页面中,重要的事情说三遍,为了这个中括号,我花了半小时找bug
最后,希望大家顺利打包
源码也贴出来(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
}
}
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
