分离样式文件

前言

一般来说，在生产环境下，我们希望样式存在于CSS文件中而不是style标签中，因为文件更有利于客户端进行缓存。抽取出来后样式表将不再依赖于 JavaScript

Webpack社区有专门的插件专门用于提取样式到CSS文件的：

1. extract-text-webpack-plugin（适用于Webpack 4之前版本）
2. mini-css-extract-plugin（适用于Webpack 4及以上版本），

mini-css-extract-plugin

安装

npm install --save-dev mini-css-extract-plugin

示例

style.css

body {
  background: green;
}

main.js

import './style.css';

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');//加载
module.exports = {
  //...
  entry: {main:'./src/main.js'},
  plugins: [new MiniCssExtractPlugin()]//使用
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],//使用
      },
    ],
  },
};

打包后你会发现多出了一个文件。名称是所以是main，是因为入口文件的chunk name是main。

---

样式的提取是以资源入口开始的整个chunk为单位的，所以如果有多个入口，需要加上filename区分一下，它的书写方式与输出文件(output)基本是一样的。这样，每个入口文件中所依赖的样式文件都会被整合在一个文件中并输出：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  //...
  plugins: [new MiniCssExtractPlugin({filename:'[name].css'})]
  //...
};

样式预处理

样式预处理（loader）指的是在开发中我们经常会使用一些样式预编译语言，如SCSS、Less等，在项目打包过程中再将这些预编译语言转换为CSS。

1. sass和scss

Sass本身是对CSS的语法增强，它有两种语法，现在使用更多的是SCSS。所以你会发现，在安装和配置loader时都是sass-loader，而实际的文件后缀是.scss。

sass-loader可以将SCSS语法编译为CSS，因此在使用时通常还要搭配css-loader和style-loader。

安装

npm install sass-loader node-sass

loader本身只是编译核心库与Webpack的连接器，因此这里我们除了sass-loader以外还要安装node-sass，node-sass是真正用来编译SCSS的，而sass-loader只是起到黏合的作用

配置

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      //通过将 style-loader 和 css-loader 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素。
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
    }]
  }
};

实例

新建一个style.scss

$primary-color:#09c;
div{color:$primary-color}

导入

import './style.scss';
function Component(){
    var div=document.createElement('div')
    div.innerHTML="初始化一个项目"
    return div
}
document.body.appendChild(Component())

打包后就能看到样式呈现在页面上了

2. less

Less同样是对CSS的一种扩展。安装loader和其本身的编译模块

安装

npm install --save-dev less-loader less

配置与SCSS相似