webpack把css从js中抽离打包--extract-text-webpack-plugin

责编:menVScode 2018-03-13 11:21 阅读(962)

extract-text-webpack-plugin:该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。

官方介绍:https://www.npmjs.com/package/extract-text-webpack-plugin

安装

# for webpack 3 
npm install --save-dev extract-text-webpack-plugin
# for webpack 2 
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1 
npm install --save-dev extract-text-webpack-plugin@1.0.1

在webpack.config.js中引入

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader", // 编译后用什么loader来提取css文件
          use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

插件参数:

(1)use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader

(2)fallback:编译后用什么loader来提取css文件

(3)publicfile:用来覆盖项目路径,生成该css文件的文件路径


前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码