• JS包含样式
    • module.loaders[].test
    • module.loaders[].loader
    • require 时配置 loader
    • 被嵌入 <head>

    JS包含样式

    在线预览构建结果页面

    安装时间可能会比较久

    1. # 安装所需 style-loader 和 css-loader
    2. npm install css-loader style-loader -D
    4. # less 和 less-loader 可以选择不安装 （如果安装了请去掉 index.js 中引入 less 的注释）
    5. npm install less-loader -D
    6. npm install less -g
    1. webpack --watch
    1. module.exports = {
    2.     entry: {
    3.         'index': './index.js'
    4.     },    
    5.     output: {
    6.         path: './',
    7.         filename: "[name].b.js"
    8.     },
    9.     module: {
    10.         loaders: [
    11.             {
    12.                 test: /\.css$/,
    13.                 loader: "style!css"
    14.             },
    15.             {
    16.                 test: /\.less$/,
    17.                 loader: "style!css!less"
    18.             }
    19.         ]
    20.     }
    21. };

    module.loaders 定义 require 的模块代码会被如何编译。 官方文档 using-loaders

    module.loaders[].test

    test 参数是一个正则表达式，用于匹配模块。'./index.css'.test(/\.css&/)

    module.loaders[].loader

    loader 参数定义被 test 匹配到的模块会执行哪些构建操作

    本例中 .css 后缀的文件会被 style-loader 和 css-loader 构建

    require 时配置 loader

    如果你不想在 webpack.config.js 配置，你还可以在 require 时单独定义一个文件会使用哪些 loader

    1. require('!style!css!./index.css')

    被嵌入 <head>

    查看 在线预览构建结果页面 源码可以看到样式通过 JS 嵌入到 <head> 中使用的

    1. <head>
    2. <style type="text/css">body {
    3.     background-color:#ABCDEF;
    4. }</style>
    5. </head>