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的文件里面了