My goal is to optimize and minify my CSS for production, but I'm encountering errors with my current implementation. Here's a snippet of my webpack 3 configuration in 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'
]
} ]
}
};
ERROR in multi ./src/index.tsx ./src/assets/css/styles.css Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\iluli\Documents\socfinder_search\frontend' @ multi ./src/index.tsx ./src/assets/css/styles.css npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] build:
npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.webpack --config webpack.prod.config.js -p
I noticed that my CSS file is not being generated into the build folder.
UPDATE: After installing css-loader, the styles.css file is now generated into the build folder, but it remains unminified. I would like the production version to have a minified CSS, where all styles are combined into one line.