webpack 两种打包模式,development生成.css 文件,production不生成,这是为什么?
如下代码,相同的 webpack.config.js 文件,使用--mode development 生成.css 文件,使用-- mode production 不生成,这是为什么?如果我想使用--mode production 生成.css 文件我该怎么做?
"build:dev": "cross-env BABEL_ENV=umd webpack --mode development --config webpack.config.js",
"build:umd": "cross-env BABEL_ENV=umd webpack --mode production --config webpack.config.js",
webpack.config.js
const path = require("path");
const webpack = require("webpack");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
const WebpackMd5Hash = require("webpack-md5-hash");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const resolve = dir => path.join(__dirname, ".", dir);
const isProd = process.env.NODE_ENV === "production";
const { version, name, description } = require("./package.json");
module.exports = {
entry: { [name]: "./src/index.js" },
output: {
// path: resolve("dist"), // 输出目录
path: path.resolve(__dirname, "dist"),
filename: "[name].min.js",
umdNamedDefine: true, // 是否将模块名称作为 AMD 输出的命名空间
//不加下面几行,被引用会被报错
libraryTarget: "umd", // 采用通用模块定义
library: name
},
devtool: "#source-map",
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
resolve: {
enforceExtension: false,
extensions: [".js", ".jsx", ".json", ".less", ".css"]
},
// 注意:本地预览的时候要注释,否则报 require undefined
// https://stackoverflow.com/questions/45818937/webpack-uncaught-referenceerror-require-is-not-defined
externals: [nodeExternals()],
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, "dist"), path.resolve(__dirname, "es"), path.resolve(__dirname, "lib")]
}),
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new WebpackMd5Hash()
],
//压缩js
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g
cssProcessor: require("cssnano"),
cssProcessorOptions: {
discardComments: { removeAll: true },
safe: true,
autoprefixer: false
},
canPrint: true
})
]
},
node: {
setImmediate: false,
dgram: "empty",
fs: "empty",
net: "empty",
tls: "empty",
child_process: "empty"
}
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论