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,21 +7,21 @@ const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
|
||||||
|
|
||||||
const isProduction = process.env.NODE_ENV == "production";
|
const isProduction = process.env.NODE_ENV == "production";
|
||||||
|
|
||||||
const stylesHandler = isProduction
|
const minimiseCSS = isProduction ? "compressed" : "expanded";
|
||||||
? MiniCssExtractPlugin.loader
|
|
||||||
: "style-loader";
|
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
entry: { app: "./src/js/app.js",
|
entry:{ "scripts": "./src/js/app.js",
|
||||||
style: ["./src/scss/styles.scss"]
|
"styles": "./src/scss/styles.scss"},
|
||||||
},
|
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, "public"),
|
path: path.resolve(__dirname, "public"),
|
||||||
},
|
},
|
||||||
devServer: {
|
devServer: {
|
||||||
open: true,
|
open: true,
|
||||||
host: "localhost",
|
host: "localhost",
|
||||||
},
|
},
|
||||||
|
optimization: {
|
||||||
|
minimize: false,
|
||||||
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: "src/index.html",
|
template: "src/index.html",
|
||||||
|
@ -36,13 +36,24 @@ const config = {
|
||||||
test: /\.(js|jsx)$/i,
|
test: /\.(js|jsx)$/i,
|
||||||
loader: "babel-loader",
|
loader: "babel-loader",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
test: /\.css$/i,
|
|
||||||
use: [stylesHandler, "css-loader"],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
test: /\.s[ac]ss$/i,
|
test: /\.s[ac]ss$/i,
|
||||||
use: [stylesHandler, "css-loader", "sass-loader"],
|
use: [
|
||||||
|
{
|
||||||
|
loader: MiniCssExtractPlugin.loader
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: "css-loader",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'sass-loader',
|
||||||
|
options: {
|
||||||
|
sassOptions: {
|
||||||
|
outputStyle: minimiseCSS,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
|
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
|
||||||
|
@ -62,14 +73,17 @@ const config = {
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = () => {
|
module.exports = () => {
|
||||||
if (isProduction) {
|
if (isProduction) {
|
||||||
config.mode = "production";
|
config.mode = "production";
|
||||||
|
config.plugins.push(new MiniCssExtractPlugin({
|
||||||
config.plugins.push(new MiniCssExtractPlugin());
|
filename: "style.min.css",
|
||||||
|
}));
|
||||||
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
|
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
|
||||||
} else {
|
} else {
|
||||||
config.mode = "development";
|
config.plugins.push(new MiniCssExtractPlugin({
|
||||||
|
filename: "style.css",
|
||||||
|
}));
|
||||||
|
config.mode = "development";
|
||||||
}
|
}
|
||||||
return config;
|
return config;
|
||||||
};
|
};
|
||||||
|
|
Reference in New Issue