Webpack

样式脚本

嵌入的样式脚本

通过使用style-loader和css-loader，可以webpack打包的javascript文件中嵌入样式脚本.
通过这种方式可以是css模块化，这种方式使用很简单require("./stylesheet.css")。

通过npm安装

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

配置

通过一下的方式支持require(xxx.css)这种方式

1
2
3
4
5
6
7
8
{
    // ...
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
}

对于css预处理语言，可以参照加载器的配置示例，你可以链式的使用它。
记住，掌握加载器的执行顺序很难，所以设计好样式让其与顺序无关（但是css文件内的样式顺序
还是得依靠的）。
使用css

1
2
3
// in your modules just require the stylesheet
// This has the side effect that a <style>-tag is added to the DOM.
require("./stylesheet.css");

分离css打包文件

与extract-text-webpack-plugin结合使用，可以生成一个原生的css文件。
使用两种方式实现代码分离

  • 每个初始块创建一个css文件，然后在其余块中引入（推荐）
  • 每个初始块创建一个 css 文件，其中同时包含了依赖块中的样式
    推荐第一种方式是因为可以减少页面初始化时间，在小型多入口项目中第二种方式可以利用缓存来减少
    http消耗

安装extract-text-webpack-plugin

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

通用

使用这个插件需要标记加载器
把css从初始化块中分离到css文件中
这个例子适用于多入口以及单页面应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 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")
    ]
}

你将获得以下文件

  • posts.js posts.css
  • post.js post.css
  • about.js about.css

把所有的样式分离到css文件中

使用第二种方式只需要设置allChunks为true

1
2
3
4
5
6
7
8
9
// ...
module.exports = {
    // ...
    plugins: [
        new ExtractTextPlugin("style.css", {
            allChunks: true
        })
    ]
}

你将会得到以下输出文件

  • posts.js
  • post.js
  • about.js
  • style.css

公共块的样式

你可以与CommonsChunkPlugin结合使用分离出一个css文件，在这个示例中公共快也会生成一个
css文件

1
2
3
4
5
6
7
8
// ...
module.exports = {
    // ...
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"),
        new ExtractTextPlugin("[name].css")
    ]
}

你会获得以下输出文件

  • commons.js commons.css
  • posts.js posts.css
  • post.js post.css
  • about.js about.css