uncompressed sass in devel
Production sees a sass compressed under the filename style.min.css. Alternatively development mode instead creates an uncompressed version under style.css -- `npm run build:dev` The scripts.js in `public` dir was previously known as app.js.
This commit is contained in:
parent
f0223a3a03
commit
b63a66c095
|
@ -7,14 +7,11 @@ const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
|
|||
|
||||
const isProduction = process.env.NODE_ENV == "production";
|
||||
|
||||
const stylesHandler = isProduction
|
||||
? MiniCssExtractPlugin.loader
|
||||
: "style-loader";
|
||||
const minimiseCSS = isProduction ? "compressed" : "expanded";
|
||||
|
||||
const config = {
|
||||
entry: { app: "./src/js/app.js",
|
||||
style: ["./src/scss/styles.scss"]
|
||||
},
|
||||
entry:{ "scripts": "./src/js/app.js",
|
||||
"styles": "./src/scss/styles.scss"},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "public"),
|
||||
},
|
||||
|
@ -22,6 +19,9 @@ const config = {
|
|||
open: true,
|
||||
host: "localhost",
|
||||
},
|
||||
optimization: {
|
||||
minimize: false,
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: "src/index.html",
|
||||
|
@ -37,12 +37,23 @@ const config = {
|
|||
loader: "babel-loader",
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [stylesHandler, "css-loader"],
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [stylesHandler, "css-loader", "sass-loader"],
|
||||
loader: "css-loader",
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sassOptions: {
|
||||
outputStyle: minimiseCSS,
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
|
||||
|
@ -64,11 +75,14 @@ const config = {
|
|||
module.exports = () => {
|
||||
if (isProduction) {
|
||||
config.mode = "production";
|
||||
|
||||
config.plugins.push(new MiniCssExtractPlugin());
|
||||
|
||||
config.plugins.push(new MiniCssExtractPlugin({
|
||||
filename: "style.min.css",
|
||||
}));
|
||||
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
|
||||
} else {
|
||||
config.plugins.push(new MiniCssExtractPlugin({
|
||||
filename: "style.css",
|
||||
}));
|
||||
config.mode = "development";
|
||||
}
|
||||
return config;
|
||||
|
|
Reference in New Issue