配置
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist"),
assetModuleFilename: "image/[contenthash][ext]",
clean: true,
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: ["babel-loader"],
},
{
test: /\.(css|less)$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["url-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["url-loader"],
},
],
},
devServer: {
static: "./dist",
open: true,
host: "localhost",
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "index.html",
title: "webpack_day02",
inject: "body",
}),
new MiniCssExtractPlugin({
filename: "style/[name][contenthash:8].css",
}),
],
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
};
配置loader解析器
- 解析css less sass // style-loader css-loader less-loader sass-loader
- 解析js babel 降级 // babel-loader @babel/core @babel/preset-env
- 解析图片 //url-loader
- 解析文件,ttf等 //url-loader
- 解析数据 xml csv // csv-loader xml-loader
关于production环境下的配置
output:{
assetModuleFilename:"image/[name][contenthash:8][ext]"
}
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
plugins:[
new MiniCssExtractPlugin({
filename:"style/[name][contenthash:8].css"
})
]
---------------------------------------------------------
module.exports={
output:{
assetModuleFilename:"image/[name][contenthash:8][ext]"
},
plugins:[
new MiniCssExtractPlugin({
filename:"style/[name][contenthash:8].css"
})
],
optimization:{
minimizer: [
new CssMinimizerPlugin(),
],
}
}
{
"presets": ["@babel/preset-env"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"version": "7.0.0-beta.0"
}
]
]
}