我们目前是手动引入打包后的 js文件,之后万一打包生成多个js文件 ,一个个引入不现实
使用一个插件自动引入
Plugin
https://webpack.docschina.org/plugins/html-webpack-plugin/#installation
下载
npm install --save-dev html-webpack-plugin
配置config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
//处理html资源 自动引入
new HtmlWebpackPlugin({
}),
运行:npx webpack
此时原生的结构消失了
那么需要保持原来的div结构进一步配置
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建新的html文件
// 新的html文件有两个特点:1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
目前的全部配置
// Node.js的核心模块,专门用来处理文件路径
const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口
entry: "./src/main.js",// 相对路径和绝对路径都行
// 输出
output: {// 必须绝对路径
// path: 文件输出目录,必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// filename: 输出文件名
filename: "static/js/main.js",
clean:true,//自动将上次打包目录资源清空
},
// 加载器
module: {//loader规则
rules: [
{
test: /\.css$/i, // 用来匹配 .css 结尾的文件
use: [
"style-loader", //将js中css通过创建style标签添加到html中
"css-loader" //该模块将css资源编译成commonjs的模块到js中
],//use 数组里面 Loader 执行顺序是从右到左(从下到上)
},
{
test: /\.less$/i, // 用来匹配 .less 结尾的文件
//loader:"xxx"只能使用1个loader
use: [//use可以使用多个loader
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',//将less变成css文件
],
},
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
{
test: /\.styl$/,
use: [
"style-loader",
"css-loader",
"stylus-loader"
],
},
{
test: /\.(png|jpe?g|gif|webp|svg)/,
type: 'asset',//asset会转base64
parser: {
dataUrlCondition: {
//小于10ke图片转base64
//优点:减少请求数量 缺点:体积会更大
maxSize: 10 * 1024 // 10kb
}
},
generator: {
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
},
},
{
test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型
type: "asset/resource",//不会转原封不动
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
{
test: /\.js$/,//处理的文件js吻技安
exclude: /node_modules/, // 排除node_modules文件不处理,不编译。这是第三方包,已经处理好了 不然会重复操作
loader: "babel-loader",//只用一个
// options: {
// presets: ['@babel/preset-env']
// }//直接写配置 或者外面写配置文件
},
],
},
// 插件
plugins: [
//检查eslint
new ESLintPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
//处理html资源 自动引入
new HtmlWebpackPlugin({
}),
],
// 模式
mode: "development",// 开发模式
};
打包