window环境下 webpack配置 出现npm ERR! notsup Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"})错误的解决方法
在windows环境(windows 7, 64bit)下, 各个配置文件如下1-7, 在D:\vue_demo目录下运行命令"npm run dev",
出现npm ERR! notsup Unsupported platform for inotify@1.4.6: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"})错误
1.package.json文件
{ "name": "vue_demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --config webpack.config.js" }, "author": "", "license": "ISC", "devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-runtime": "^6.26.0", "css-loader": "^2.1.0", "extract-text-webpack-plugin": "^4.0.0-beta.0", "style-loader": "^0.23.1", "vue-hot-reload-api": "^2.3.2", "vue-loader": "^14.2.4", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.7", "webpack": "^4.29.5", "webpack-cli": "^3.2.3", "webpack-dev-server": "^3.2.0" }, "dependencies": { "vue": "^2.6.7" } }
2.webpack.config.js文件
var path = require('path'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var config = { entry: { main: './main' }, output: { path: path.join(__dirname, './dist'), publicPath: '/dist', filename: 'main.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' }) } } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, use: ExtractTextPlugin.extract({ use:'css-loader', fallback: 'style-loader' }) } ] }, plugins: [ new ExtractTextPlugin("main.css") ] }; module.exports = config;
3.app.babelrc文件
{ "presets": ["es2015"], "plugins": ["transform-runtime"], "comments": false }
4.app.vue文件
<template> <div>Hello {{ name }}</div> </template> <script> export default{ data(){ return { name: 'Vue.js' } } } </script> <style scoped> div{ color: #f60; font-size: 24px; } </style>
5.main.js文件
import Vue from 'vue'; import App from './app.vue'; new Vue({ el: '#app', render: h => h(App) });
6.index.html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>webpack App</title> <link rel="stylesheet" type="text/css" href="/dist/main.css"></script> </head> <body> <div id="app"> Hello World. </div> <script type="text/javascript" src="/dist/main.js"></script> </body> </html>
7.style.css文件
#app{ font-size: 24px; color: #f50; }
解决方法如下:
在D:\vue_demo目录下运行命令"npm install copy-webpack-plugin --save-dev",
完成后, 你会发现package.json文件的"devDependencies"下追加了"copy-webpack-plugin": "^5.0.0",
再次运行"npm run dev", 工程成功运行.