const dev = process.env.NODE_ENV !== 'production';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-const extractSass = new ExtractTextPlugin({
- filename: "[name].css"
- // disable: process.env.NODE_ENV === "development"
-});
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
+ target: 'web',
+ mode: dev? 'development' : 'production',
entry: {
app: './resources/assets/js/index.js',
styles: './resources/assets/sass/styles.scss',
use: {
loader: 'babel-loader',
options: {
- presets: ['@babel/preset-env']
+ presets: [[
+ '@babel/preset-env', {
+ useBuiltIns: 'usage'
+ }
+ ]]
}
}
},
{
test: /\.scss$/,
- use: extractSass.extract({
- use: [{
+ use: [
+ {
+ loader: MiniCssExtractPlugin.loader,
+ options: {}
+ },
+ {
loader: "css-loader", options: {
- sourceMap: dev
+ sourceMap: dev
+ }
+ }, {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ sourceMap: dev,
+ plugins: (loader) => [
+ require('autoprefixer')(),
+ ]
}
}, {
loader: "sass-loader", options: {
sourceMap: dev
}
- }],
- // use style-loader in development
- fallback: "style-loader"
- })
+ }
+ ]
}
]
},
- plugins: [extractSass]
+ plugins: [
+ new MiniCssExtractPlugin({
+ filename: "[name].css",
+ }),
+ ]
};
if (dev) {