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>