网站的Webpack配置

时间:2018-06-21 12:17:20

标签: webpack html-webpack-plugin uglifyjs-webpack-plugin

我一直在为我的项目使用此webpack配置。我想将“ src”目录中的所有文件都处理并放在“ www”目录中。

即:

src / *。css-> csso-> www / *。css

src / *。html->内联css-> html-缩小-> www / *。html

src / *。js->汇总-> babel-> uglifyjs-> www / *。js

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CssoWebpackPlugin = require('csso-webpack-plugin').default;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
    mode: 'production',
    entry: './src/app.js',
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }, {
                loader: 'webpack-rollup-loader',
                options: {
                    experimentalCodeSplitting: true,
                    optimizeChunks: true
                }
            }]
        }]
    },
    output: {
        path: path.resolve(__dirname, 'www'),
        publicPath: '',
        filename: 'app.js'
    },
    optimization: {
        minimize: true,
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                uglifyOptions: {
                    ecma: 5,
                    warnings: true,
                    mangle: false,
                    compress: {
                        dead_code: false,
                        drop_console: true,
                        loops: false,
                        unsafe: true,
                        unsafe_comps: true,
                        unsafe_proto: true,
                        unused: false,
                        warnings: true,
                        sequences: false,
                        passes: 3
                    }
                }
            })
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new CssoWebpackPlugin(),
        new HtmlWebpackPlugin({
            inlineSource: '.(css)$',
            alwaysWriteToDisk: true,
            filename: 'index.html',
            template: 'src/index.html',
            minify: {
                quoteCharacter: '"',
                decodeEntities: true,
                sortAttributes: true,
                removeComments: true,
                collapseWhitespace: true
            }
        }),
        new HtmlWebpackHarddiskPlugin({
            outputPath: path.resolve(__dirname, 'www')
        }),
        new HtmlWebpackInlineSourcePlugin()
    ]
}

我在做什么错了?

0 个答案:

没有答案