webpack4--MiniCssExtractPlugin(extract-text-webpack-plugin)
2021-08-18 00:59
标签: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: ‘../‘, hmr: process.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
文章标题:webpack4--MiniCssExtractPlugin(extract-text-webpack-plugin)
文章链接:http://soscw.com/index.php/essay/107544.html