webpack.config 按照production和dev分开配置,
wepback.base.config.js
npm install webpack-merge -D
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: {
index: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name]-[hash:6].js",
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
name: "[name].[ext]",
outputPath: "images",
limit: 1024 * 3, //3kb
},
},
},
{
test: /\.(eot|woff|woff2)$/,
use: "file-loader",
},
{
test: /\.js$/,
use: {
loader: "babel-loader",
},
},
],
},
plugins: [new CleanWebpackPlugin()],
};
webpack.dev.config.js
//webpack内置插件
const { HotModuleReplacementPlugin } = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config.js");
const devConfig = {
mode: "development",
module: {
rules: [
{
test: /\.less$/,
use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
},
],
},
devtool: "inline-source-map",
devServer: {
contentBase: "./dist",
open: true,
hot: true,
hotOnly: true,
port: 8081,
proxy: {
"/api": {
target: "http://localhost:9092",
},
},
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
}),
new HotModuleReplacementPlugin(),
],
};
// module.exports = (env) => {
// //
// if(porcess.env.NODE_ENV==='env'){
// return merge(baseConfig,devConfig)
// }else{
// return merge(baseConfig,prodConfig)
// }
// };
module.exports = merge(baseConfig, devConfig);
webpack.prod.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require("path");
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config.js");
const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");
const prodConfig = {
mode: "production",
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
},
},
"css-loader",
"postcss-loader",
"less-loader",
],
},
],
},
optimization: {
usedExports: true,
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
minify: {
// 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true, // 压缩内联css
},
}),
new MiniCssExtractPlugin({
filename: "css/[name]-[contenthash:6].css",
}),
new OptimizeCSSAssetsPlugin({
cssProcessor: require("cssnano"), // 这里制定了引擎,不指定默认也是 cssnano
}),
new PurifyCSS({
paths: glob.sync([
// 要做 CSS Tree Shaking 的路径文件
path.resolve(__dirname, "./src/*.html"), // 请注意,我们同样需要对 html 文件进行 tree shaking
path.resolve(__dirname, "./src/*.js"),
]),
}),
],
};
module.exports = merge(baseConfig, prodConfig);
附加配置文件
postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 2 versions", ">1%"],
}),
// require("cssnano"),
],
};