使用webpack和一个配置捆绑CSS和JS

Question

我试图了解webpack的工作原理。 我正在开发Wordpress主题，因此决定尝试Webpack。

我正在为Webpack进行配置。 配置它来处理SASS相当容易，但是要增加对应捆绑到一个JS文件中的JS文件的支持： scripts.js ，那么就很难理解它的工作原理。

那是我的配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    watch: true,
    entry: ['./scss/style.scss'],
    output: {
        filename: './style.css',
        publicPath: '/'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
        }]
    },
    plugins: [
        new ExtractTextPlugin({ // define where to save the file
            filename: './style.css',
            allChunks: true
        }),
        new UglifyJSPlugin({
            sourceMap: true
        })
    ]
};

我想知道JS文件的配置应如何？

Answer 1

替换webpack选项：

entry: ['./scss/style.scss'],
output: {
    filename: './style.css',
    publicPath: '/'
},

同

entry: ['./js/index.js'],
output: {
    filename: './bundle.js',
    publicPath: '/'
},

./js/index.js的内容：

require('./scss/style.scss')

在webpack配置中的ExtractTextPlugin选项中，已指定style.css包的输出路径。 像通常在html文件中那样包含该css包。