码迷,mamicode.com
首页 > Web开发 > 详细

webpack4--MiniCssExtractPlugin(extract-text-webpack-plugin)

时间:2020-02-19 11:34:00      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:assign   nod   round   exp   iter   npm   需要   bpa   ===   

在使用webpack打包时,将css代码从bundle.js中抽离出来,单独出一个模块,需要用到extract-text-webpack-plugin插件

webpack版本不同,相对于的插件也不同,如下:

# for webpack 4
npm install --save-dev mini-css-extract-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

之前版本使用方法,可参照:https://github.com/webpack-contrib/extract-text-webpack-plugin

webpack4中,用mini-css-extract-plugin替代。

webpack.config.js:

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
 
module.exports = {
  plugins: [new MiniCssExtractPlugin(
    filename:‘./css/[name].css‘
  )],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath‘../,
         hmrprocess.env.NODE_ENV === ‘development,  
}, }, ‘css-loader‘, ], }, ], }, };

更多mini-css-extract-plugin的使用方法请查看:https://www.npmjs.com/package/mini-css-extract-plugin

 

webpack4--MiniCssExtractPlugin(extract-text-webpack-plugin)

标签:assign   nod   round   exp   iter   npm   需要   bpa   ===   

原文地址:https://www.cnblogs.com/Super-scarlett/p/12330409.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!