vue-cli 新创建的项目启动报错 Module build failed: Error: "extract-text-webpack-plugin"

问题

使用

vue-cli

新创建工程，并且已经

npm install

成功安装所有依赖包，运行

$ npm start

时报以下错误。

error  in ./src/App.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.pitch (D:\study\vue\my-project\node_modules\extract-text-webpack-plugin\dist\loader.js:57:11)

@ ./src/App.vue 2:2-358
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

error  in ./src/components/HelloWorld.vue

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.pitch (D:\study\vue\my-project\node_modules\extract-text-webpack-plugin\dist\loader.js:57:11)

@ ./src/components/HelloWorld.vue 2:2-373
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

分析

extract-text-webpack-plugin

在报错信息中，看到

failed: Error: "extract-text-webpack-plugin"

，它是 webpack 的一个插件：用于在打包项目代码时将 css 代码从 js 代码中分离出去，于是就猜测是不是这个插件配置有问题。在

vue-cli

工具生成的目录结构中找到

build

目录，其中存放 webpack 的配置文件，包含了 base（基础配置，公共部分）、dev（开发配置）、prod（生产配置）等配置文件，那么到底是哪个配置文件影响了呢？

$ npm start

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs",
"build": "node build/build.js"
},

在 package.json 中可以看到运行

$ npm start

实际上运行的是

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

，这句话的含义是使用 webpack 本地服务器启动项目，并且根据

webpack.dev.conf.js

配置文件对项目进行打包编译。

webpack.dev.conf.js

打开

webpack.dev.conf.js

文件，可以看到里面压根就没有配置过

extract-text-webpack-plugin

这个插件，猜测可能是这个问题导致的。

解决

在

webpack.dev.conf.js

中添加

extract-text-webpack-plugin

配置如下。重启

$ npm start

可以看到此时项目被成功启动，并且在浏览器中可以看到 Vue 的欢迎界面。

const ExtractTextPlugin = require('extract-text-webpack-plugin')

........

plugins: [
.............
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// set the following option to `true` if you want to extract CSS from
// codesplit chunks into this main css file as well.
// This will result in *all* of your app's CSS being loaded upfront.
allChunks: false,
}),
]