path是node.js里面的需求语法,需要引出
const path = require("path");
引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); //需求,导入
实例化插件
const htmlPlguin = new HtmlWebpackPlugin({
template: "./src/index.html", //模板 也就是说要复制的文件
filename: "index.html", //filename是文件名的意思 就是复制的文件的名称
});
module.exports = {
//编译模式
mode: "production",
//development开发阶段 production最终产品
// __dirname代表当前文件所处的目录
entry: path.join(__dirname, "./src/index.js"), //入口文件 这里必须加./ 不然无法识别
output: {
path: path.join(__dirname, "./dist"), //输出文件的存放路径
filename: "bundle.js", //输出文件的名称
},
plugins: [htmlPlguin], //plugins插件的意思
module: {
这里是加载器,用正则表达式所有css文件可以被打包.加载器从右到左,从上到下执行.
图片打包css用url-loader加载器,但是必须依赖于file-loader. html中的图片 用html-withimg-loader 加载器处理
rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }],
},
};
webpack因为加载器版本的问题不容易兼容,一般自己单独配置. 一般用脚手架,脚手架就是基于webpack的,配置都是现成的,兼容性好,不冲突
webpack配置
原文：https://www.cnblogs.com/renshen/p/12971159.html
