Can I use webpack to generate CSS and JS separately?

后端 未结 7 2003
长情又很酷
长情又很酷 2020-12-02 07:37

I have:

  1. JS files that I want to bundle.
  2. LESS files that I want to compile down to CSS (resolving @imports into a single bundle).

I was

7条回答
  •  离开以前
    2020-12-02 08:39

    To further clarify bdmason's former answer - it seems the desirable configuration would be to create a JS and CSS bundle for each page, like so:

     entry: {
            Home: ["./path/to/home.js", "./path/to/home.less"],
            About: ["./path/to/about.js", "./path/to/about.less"]
        }
    

    And then use the [name] switch:

    output: {
            path: "path/to/generated/bundles",
            filename: "[name].js"
        },
    plugins: new ExtractTextPlugin("[name].css")
    

    Full configuration - with some additions not connected to the question (we're actually using SASS instead of LESS):

    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    var debug = process.env.NODE_ENV !== "production";
    var webpack = require('webpack');
    require('babel-polyfill');
    
    module.exports = [{
        devtool: debug ? "inline-sourcemap" : null,
        entry: {
            Home: ['babel-polyfill', "./home.js","path/to/HomeRootStyle.scss"],
            SearchResults: ['babel-polyfill', "./searchResults.js","path/to/SearchResultsRootStyle.scss"]
        },
        module: {
            loaders: [
                {
                    test: /\.jsx?$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'es2015'],
                        plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                    }
                },
                {
                    test: /\.scss$/,
                    loader: ExtractTextPlugin.extract("style-loader","css-raw-loader!sass-loader")
                }
            ]
        },
        output: {
            path: "./res/generated",
            filename: "[name].js"
        },
        plugins: debug ? [new ExtractTextPlugin("[name].css")] : [
            new ExtractTextPlugin("[name].css"),
            new webpack.DefinePlugin({
                'process.env':{
                    'NODE_ENV': JSON.stringify('production')
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress:{
                    warnings: true
                }
            })
        ]
    }
    ];
    

提交回复
热议问题