webpack中加载CSS

webpack强大之处在于可以将CSS当做一个资源模块进行管理和加载

基本使用：

安装webpack的加载插件style-loader和css-loader:

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

修改配置文件webpack.config.js:

var webpack = require('webpack');

module.exports = {
    //context: __dirname + "/src", //指定了工作的目录，相当如base路径
    entry: "./src/app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    devtool: "#source-map",
    module: {
        loaders: [
            // Transpile any JavaScript file:
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
        ]
    },
    resolve: {
        alias: { //将常用的lib在这里设置别名
            //"bootstrap.css": "bootstrap/dist/css/bootstrap.css"
        }
    }

test: /\.css$/这里设置了加载器

app.js中

require("./test.css");

最后执行webpack命令，test.css会被打包到bundle.js中。。。。NB

上面的方式会将CSS打包到JS文件中，虽然很NB但总归是怪怪的

没关系，还是有方案将css单独拿出来的，这里用到另一个插件extract-text-webpack-plugin
还是先安装

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

修改配置文件如下:

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

module.exports = {
    //context: __dirname + "/src", //指定了工作的目录，相当如base路径
    entry: "./src/app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    devtool: "#source-map",
    module: {
        loaders: [
            // Transpile any JavaScript file:
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }, {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
        ]
    },
    resolve: {
        alias: { //将常用的lib在这里设置别名
            //"bootstrap.css": "bootstrap/dist/css/bootstrap.css"
        }
    },
    // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
    plugins: [
        new ExtractTextPlugin("[name].css")
    ]
}

执行命令，这时候dist里面会有多出来的.css文件了

将多个CSS文件打包到一个CSS文件

还是上面的配置文件，修改下面的地方：

plugins: [
    new ExtractTextPlugin("style.css", {
        allChunks: true
    })
]

将公共部分隔离出去

new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"),
new ExtractTextPlugin("[name].css")

参考：
https://webpack.github.io/docs/stylesheets.html

转载于:https://www.cnblogs.com/le0zh/p/webpack-jia-zai-css.html