我想为生产缩小/优化我的CSS,但出于某种原因,它显示了我当前实现的错误。我的Webpack3 config.production.js如下所示:
var webpack = require("webpack");
var path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
"./src/index.tsx","./src/assets/css/styles.css"
],
output: {
filename: "bundle.js",
publicPath: "/",
path: path.resolve(__dirname, "dist")
},
// Enable sourcemaps for debugging webpack's output.
// devtool: "cheap-module-source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new ExtractTextPlugin("styles.css"),
],
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, use: ["awesome-typescript-loader"] },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, enforce: "pre", use: "source-map-loader" },
{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }
],
loaders: [ {
test: /\.js|.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
}, {
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
} ]
}
};
multi中出错。/src/index.tsx./src/assets/css/styles.css
找不到模块:错误:无法解析“c:\users\iluli\documents\socfinder\u search\frontend”中的“样式加载程序”
@多/src/index.tsx./src/assets/css/styles.css
NPM错误!代码有效周期
NPM错误!2号错误
NPM错误!socfinder search@1.0.0版本:
webpack --config webpack.prod.config.js -p
NPM错误!退出状态2
NPM错误!
NPM错误!在socfinder search@1.0.0构建脚本失败。
NPM错误!这可能不是NPM的问题。上面可能还有额外的日志输出。
我无法在构建文件夹中看到我的CSS文件。
更新:在安装了CSS加载器之后,现在styles.css被生成到build中,但是build css和dev css没有区别。我希望产品有一个缩小版的CSS,为所有的CSS在一行。