Webpack安装extract-text-webpack-plugin遇见的两个问题

最新推荐文章于 2024-08-15 09:19:44 发布

Cacra

最新推荐文章于 2024-08-15 09:19:44 发布

阅读量1w

点赞数

分类专栏：前端前端工程化文章标签：插件

本文链接：https://blog.csdn.net/u014465934/article/details/78161204

版权

前端同时被 2 个专栏收录

68 篇文章 2 订阅

订阅专栏

前端工程化

5 篇文章 0 订阅

订阅专栏

前言，关于extract-text-webpack-plugin插件的使用可以参考http://www.jianshu.com/p/439764e3eff2这篇文章。

1.提示Chunk.entry was removed. Use hasRuntime()
这个主要是webpack版本和extract-text-webpack-plugin插件对应的版本不一致的原因。
现在我们使用的最新版是webpack3.0版本了，所以对应安装也应该有选择。

# 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

如果安装之前网上教程，因为时效性问题，可能会出现版本对应问题，还有extract-text-webpack-plugin插件具体使用方法可参考官网https://www.npmjs.com/package/extract-text-webpack-plugin

2.出现如下报错：
ERROR in ./src/page/index/index.css
Module build failed: ModuleParseError: Module parse failed: C:\Git\repository\mike-mmail-fel\src\page\index\index.css Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
这个也是因为版本的问题，因为现在是3.0版本了，现在教程大多是2.0或1.0版本的文章了，对于loader设置不一样，3.0版本应该设置成如下：

module:{
	 	loaders:[
	 		{
	 			test: /\.css$/,
   				use: ExtractTextPlugin.extract({
     			fallback: "style-loader",
     			use: "css-loader"
   				})
	 		}
	 	]
	 },
plugins: [
	 new ExtractTextPlugin({
  		filename: 'css/[name].css'
	}),
]

具体步骤可以参考文章：
http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c42246020471e4cf27201105d5c577601cfc091ab1a168252a5577f1c893d60bc0be95282c882c307608c31c528516f88100659271d64de8df0ee7cce733e3e88599994352ba44050c97f1fb1f5744dd6e805662b2ff8e49654810ccfa3115bd07307cc47f57b636bcb7627906f1b48e0d15d42ba060&p=8a7cc54ad6c041fd0be296265951a5&newp=8b2a970781b111a058ee943c614383231610db2151d4d6156b82c825d7331b001c3bbfb423241506d0c17f660aa54d57eaf13575340225a3dda5c91d9fb4c57479ca7046&user=baidu&fm=sc&query=extract-text-webpack-plugin+webpack3&qid=87f6223200026c51&p1=4