Webpack详细配置打包原生js/html/css项目
安装webpack：npm i webpack webpack-cli -D
- webpack：是webpack工具的核心包
- webpack-cli：提供了一些在终端中使用的命令
- -D（--save-dev）：表示项目开发期间的依赖，也就是：线上代码中用不到这些包了
创建webpack.config.js 文件
// 引入path模块
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 入口【写绝对路径】
//多入口
entry: {
'./js/index': path.join(__dirname, "./src/utils/index.js"),
'./js/active': path.join(__dirname, "./src/utils/active.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,
},
// 出口目录
path: path.join(__dirname, "./dist"),
// 出口文件
filename: "[name].js",
},
// 开发模式
mode: "development",
// 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: [
// 配置html-webpack-plugin插件；需要实例出一个模板文件
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/html/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']
}),
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/html/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']
})
],
};
项目中 npm init -y 初始化package.json文件 scripts中配置启动
//打包 npm run build
"build": "webpack --mode=development",
//启动 npm run dev 端口号可随意配置
"dev": "webpack-dev-server --open --port 3001"
