const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// 入口文件
entry: "./index.js",
// 出口文件
output: {
// 出口文件名称
filename: "bluid.js",
// 智能合并路径,绝对路径
path: resolve(__dirname,'build')
},
module: {
rules: [
{
// 引导打包文件和编译的文件为css文件
test: /\.css$/,
// 内部执行哪些loader,loader的执行顺序是倒叙的,后写的先执行
use: [
// 识别css-laoder的js字符串为样式代码,添加到head标签
'style-loader',
// css-loader是将样式的代码翻译为js的模式,内部是样式的字符串
'css-loader'
]
},
{
// 识别.js结尾的文件
test: /\.js$/,
// 不需要识别/翻译node_modules文件夹内部的内容
exclude: /node_modules/,
// 使用的loader
use: [
{
loader: 'babel-loader',
// 指导babel-loader进行翻译的配置工具
// options: {
// presets: ['env'] // env 指的是ECMAScript New Version(ES的新版本)
// }
}
]
},
{
// 配置编译img标签引入的图片
loader: 'html-loader',
test: /\.html$/
}
]
},
plugins: [
// 配置html的文件
new HtmlWebpackPlugin({
// template表示是引入的模板文件地址
template: './index.html',
// 压缩HTML代码
minify: {
// 移除所有的空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
}),
new MiniCssExtractPlugin()
],
devServer: {
static: resolve(__dirname, 'bluid'),
// 端口号
port: 2000,
open: true
},
// // 实时监听
watch: true,
// 打包模式
mode: 'development'
}
webpack简易配置
最新推荐文章于 2024-07-29 19:55:09 发布