Webpack не сжимает javascript - PullRequest
Новая
       26

Webpack не сжимает javascript

0 голосов
/ 06 августа 2020

Webpack сжимает мой css, но не мой javascript. Приветствуется любая помощь, код из моего webpack.config.js файла ниже: 

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './js/all.js',
    output: {
        path: path.resolve(__dirname, 'theme/assets'),
        filename: 'scripts.js.liquid',
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader?-url', 'postcss-loader', 'sass-loader'],
                }),
            },
        ],
    },
    plugins: [new ExtractTextPlugin('style.css.liquid')],
}

1 Ответ

0 голосов
/ 06 августа 2020

Это не работает для вас, потому что вы настроили mode: development.

Разделите ваш файл на 3 файла:

  1. webpack.dev. js
  2. webpack.prod. js
  3. webpack.common. js

webpack.dev. js: 

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
};

webpack.prod. js: 

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production',
};

webpack.common. js: 

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
    entry: './js/all.js',
    output: {
        path: path.resolve(__dirname, 'theme/assets'),
        filename: 'scripts.js.liquid',
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader?-url', 'postcss-loader', 'sass-loader'],
                }),
            },
        ],
    },
    plugins: [new ExtractTextPlugin('style.css.liquid')],
}

и запускайте сборки с помощью этих сценариев в пакете. json: 

scripts: {
   "build_dev": "webpack -p webpack.dev.js",
   "build_prod": "webpack -p webpack.prod.js"
}

затем запускайте из командной строки: npm run build_prod, минимизирует ли это код?

...