webpack的css单独打包解决方案

背景是在webpack打包的时候，如果不做特殊处理，那么webpack会把css，less，image等等都打包到js文件中，而这会导致一些bug。

是为了解决：样式是通过js 动态添加 style 标签引入的问题，因为动态添加所以css动画会有一个不必要的闪烁效果，初步估计是因为：css的stlye应该先被渲染。所以要把css抽离出来。那么就引入了extract-text-webpack-plugin这个插件。

但是！这里有个坑，如果直接使用以下命令安装是有bug的：

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

因为 extract-text-webpack-plugin目前不支持webpack4，所以要使用如下命令行安装：

npm install extract-text-webpack-plugin@next

 这样就可以使用最新的beta版。

然后在webpack中配置：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),//打包后的文件名
  ]
}

 再补充一点关于loader的知识：

webpack本身只能打包Javascript文件，对于其他资源例如 css，图片，或者其他的语法集比如jsx，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。

上面的代码是在webpack.config.js里添加配置，这种loader的使用方法最佳。

loader的解析是从右往左解析，介绍几个常见的loader：

样式

1. css-loader : 解析css文件中代码
2. style-loader : 将css模块作为样式导出到DOM中
3. less-loader : 加载和转义less文件
4. sass-loader : 加载和转义sass/scss文件

脚本转换编译

1. script-loader : 在全局上下文中执行一次javascript文件，不需要解析
2. babel-loader : 加载ES6 代码后使用Babel转义为ES5后浏览器才能解析

Files文件

1. url-loader : 多数用于加载图片资源,超过文件大小显示则返回data URL
2. raw-loader : 加载文件原始内容(utf-8格式)

加载框架

1. vue-loader : 加载和转义vue组件
2. react-hot-loader : 动态刷新和转义react组件中修改的部分

转载于:https://www.cnblogs.com/yuan233/p/10940471.html