Webpack从入门到出门（3）

（如转载，请注明出处）

1.安装css-loader

npm install css-loader --save-dev

然后在webpack.config.js中配置：

module: {

        rules: [

            { test: /\.css$/, use: 'css-loader' }

        ]

    },

然后在src目录下建立一个app.css文件，在app.js（你没看错，是app.js）文件中加入下面代码:

const css = require('./app.css');

运行npm run dev, 你会发现并没有什么用，css没有生效，这是因为我们还缺一个style-loader, 于是我们在终端输入npm install style-loader --save-dev，把webpack.config.js中的配置改为

module: {

        rules: [

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

        ]

    },

终于，我们的CSS生效了！

如果我们有很多loaders需要加载，也可以将配置改成这样：

module: {

        rules: [

            { 

test: /\.css$/,  use: [ 'style-loader', 'css-loader'] 

}

        ]

    },

2.安装sass-loader

在终端输入命令： npm install sass-loader node-sass webpack --save-dev

我们将上面的配置中加入sass-loader, 并将/\.css$/修改为/\.scss$/, 像这样：

test: /\.scss$/,  use: [ 'style-loader', 'css-loader', 'sass-loader'] 

需要将我们的app.css文件改为app.scss, 而且不要忘记我们在app.js中引入的app.css一并改为app.scss,

然后我们运行npm run dev, 会发现缺少webpack-sources：

安装webpack-sources: 

npm i webpack-sources --save-dev

再运行npm run dev, 成功！

2. 安装extract-text-webpack-plugin

有时我们想要将样式文件输出为独立文件，那么我们可能需要extract-text-webpack-plugin, 安装命令：

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

然后在webpack.config.js中配置： 

const ExtractTextPlugin = require("extract-text-webpack-plugin");

将test: /\.css$/,  use: [ 'style-loader', 'css-loader'] 修改为：

test: /\.scss$/,

                use: ExtractTextPlugin({

                    fallback: 'style-loader',

                    loader: ['css-loader', 'sass-loader'],

                    publicPath: 'dist'

                })

并在plugins中添加： new ExtractTextPlugin("app.css")  (其中文件名需要与我们建立的文件名一致)

也可以在plugin中这样写：

new ExtractTextPlugin({

            filename: "app.css",

            disable: false,

            allChunks: true

        })