一、extrack-tex-webpack-plugin作用:
为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
二、使用
1、
npm install --save-dev extract-webpack-plugin
2、webpack.production.config.js中
const webpack=require("webpack");
//...
const ExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
devtool:'null',//注意,这能大大压缩我们的打包代码
entry:'./src/main.js',//唯一入口文件,__dirname是node.js中的一个全局变量,它指向当前执行脚本所在目录
output:{
filename:"bundle-[hash].js",//打包后输出的文件的文件名
path:__dirname+'/build'//打包后的文件存放的地方
},
devServer:{
../
},
module: {
//...
},
plugins: [
//...
new ExtractTextPlugin('style.css')
],
};
报错:
错误出现原因:
extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。
三、解决
npm install --save-dev extract-webpack-plugin@next
再次运行,就ok啦