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')

style.css捆绑包的输出路径在您的webpack配置中以ExtractTextPlugin的选项指定alredy。像html文件中一样包含css包。

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

1 个答案: