配置+安装包
npm init -y
npm i webpack webpack-cli html-webpack-plugin -D
配置webpack.config.js
const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "js/[name].js",// filename: 输出文件名
clean: true,
},
module: {
rules: [],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public/index.html"),
}),
],
mode: "development",
};
运行:npx webpack
创建loaders文件夹:
loader就是一个函数, 当webpack解析资源时,会调用相应的loader去处理,
loader接受到文件内容作为参数,返回内容出去 content 文件内容 map SourceMap
meta 别的loader传递的数据
const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",//根据找到依赖
output: {
path: path.resolve(__dirname, "./dist"),
filename: "js/[name].js",// filename: 输出文件名
clean: true,
},
module: {//编译记载配置
rules: [
{
test: /\.js$/,//处理js文件
loader: "./loaders/test-loader.js",//将要处理文件作为参数传到test-loader.js
},
{
test: /\.js$/,//处理js文件
loader: "./loaders/test-loader.js",//将要处理文件作为参数传到test-loader.js
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "public/index.html"),
}),
],
mode: "development",
};
实现效果