webpack4.0版本之css单独打包

这个适应新版本webpack4.0以上,太难了

参考官方文档,不仅让我大声呼喊,官方牛逼

MiniCssExtractPlugin

webpack4.0版本之css单独打包 webpack4.0版本之css单独打包 webpack4.0版本之css单独打包 webpack4.0版本之css单独打包 webpack4.0版本之css单独打包 webpack4.0版本之css单独打包 webpack4.0版本之css单独打包

本插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。

本插件基于 webpack v4 的新特性(模块类型)构建,并且需要 webpack 4 才能正常工作。

与 extract-text-webpack-plugin 相比:

  • 异步加载
  • 没有重复的编译(性能)
  • 更容易使用
  • 特别针对 CSS 开发

快速开始 

首先,你需要安装 mini-css-extract-plugin

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

建议 mini-css-extract-plugin 与 css-loader 一起使用。

之后将 loader 与 plugin 添加到你的 webpack 配置文件中。 例如:

style.css

body {
  background: green;
}

component.js

import ‘./style.css‘;

webpack.config.js

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

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, ‘css-loader‘],
      },
    ],
  },
};

webpack4.0版本之css单独打包

上一篇:js例子和Jquery


下一篇:Mybatis:在main文件中使用@Test标签时的爆红问题