webpack构建React应用四：使用webpack Loaders 模块加载器(二)

css-loader

我们需要在js文件里面，通过require的方式来引入css。首先需要安装css-loader，style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。

npm install css-loader style-loader --save-dev

然后在entry.js中增加

require('./css/app.css')

在app.css中写入样式，在webpack.config.js中增加:

const path = require('path');
module.exports = {
    entry: "./src/entry.js",
    output: {
        path: '/dist/',
        filename: "bundle.js",
        publicPath: '/dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, "src")
                ]
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ],
    }
}

看看你要的效果是不是出来了！
如果我们需要在js中，通过require的方式来引入less文件，我们需要安装less，less-loader

npm install less less-loader --save-dev

在webpack.config.js中加入：

{
    test: /\.less$/,
    loader: 'style-loader!css-loader!less-loader'
}

提取css

用require来的文件，会内联到bundle中。如果我们需要把保留require的写法又想把css文件单独拿出来，可以使用html-webpack-plugin + extract-text-webpack-plugin来处理，生成的chunk文件会自动的打入html文件。
1.安装

npm install extract-text-webpack-plugin html-webpack-plugin --save-dev

2.使用
在webpack.config.js中编辑：

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: "./src/entry.js",
    output: {
        path: '/dist/',
        filename: "bundle.js",
        publicPath: '/dist/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, "src")
                ]
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"})
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader!less-loader"})
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
                title: 'webpack构建React应用系列',
                filename: './index.html', //生成的文件
                template: path.resolve(__dirname, "src/index.html"),  //模板文件目录
                inject: 'body' //所有JavaScript资源插入到body元素的底部
            }),
        new ExtractTextPlugin("style.css") //将css提取到style.css里面
    ],
}

接下来运行并访问，http://localhost:888/dist/ ,f12看elements，会发现之前的内联样式，都被提取到style.css的文件里面了