react.js - webpack该怎么打包scss文件并且导出？

问题描述

问 题

就是类似打包js文件这样，打包scss文件成一个css，然后html里面直接link引入，虽然知道用extract-text-webpack-plugin这个插件，但是我不知道entry和output该怎么写？这两个里面已经写了js了，怎么再单独写scss的？难道是module.exports导出两个对象？

解决方案

官网上的例子

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    // The standard entry point and output config
    entry: {
        posts: "./posts",
        post: "./post",
        about: "./about"
    },
    output: {
        filename: "[name].js",
        chunkFilename: "[id].js"
    },
    module: {
        loaders: [
            // Extract css files
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            // Optionally extract less files
            // or any other compile-to-css language
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            }
            // You could also use other loaders the same way. I. e. the autoprefixer-loader
        ]
    },
    // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
    plugins: [
        new ExtractTextPlugin("[name].css")
    ]
}

这篇关于react.js - webpack该怎么打包scss文件并且导出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！