美文网首页我爱编程
webpack js压缩 css分离

webpack js压缩 css分离

作者: wdy934_ | 来源:发表于2018-04-10 23:24 被阅读0次

    原本想按照网上的一些教程去做的, 但是, webpack4.0 去除掉了默认的js压缩插件, 或者说, 名字改掉了

    我的优化方法如下(还可以再优化,后面再更新):

    webpack4.0 以前的版本可以直接用: extract-text-webpack-plugin

    webpack4.0之后的版本要加上: extract-text-webpack-plugin@next

    extract-text-webpack-plugin :
    某类型文件( 如: .less/.sass/.css)合并成一个文件 , 并从js分离

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    // const  webpackUglifyJsPlugin = require('uglify-js-plugin');
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
    const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
    module.exports = {
        entry: [
            'babel-polyfill', path.resolve(__dirname, 'src/index.js')
        ],
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/i,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                "presets": ["env", "react", "stage-2"]
                            }
                        }
                    ],
                    exclude: /node_modules/
                }, {
                    test: /\.css$/i,
                    use: extractCSS.extract({
                        fallback: 'style-loader',
                        use: ['css-loader']
                      })
                }, {
                    test: /\.less$/i,
                    use: extractLESS.extract({
                        fallback: 'style-loader',
                        use: ['css-loader', 'less-loader']
                      })
                }
            ]
        },
        resolve: {
            extensions: ['.js', '.jsx']
        },
        plugins: [
            new HtmlWebpackPlugin({title: 'manage', filename: "index.html", inject: 'body'}),
            new UglifyJsPlugin({
                parallel: 4,
                uglifyOptions: {
                    output: {
                        comments: false,
                        beautify: false
                    },
                    compress: {},
                    warnings: false
                },
                cache: true
            }),
            extractLESS,
            extractCSS
        ]
    };
    

    相关文章

      网友评论

        本文标题:webpack js压缩 css分离

        本文链接:https://www.haomeiwen.com/subject/kduohftx.html