一：基于window的安装
- D:\Program Files\nodejs\node_global在此目录下全局安装webpack
- 安装完会提示是否安装webpack-cli选择yes
- webpack -v查看安装版本
二：基于mac版安装
-
全局安装
npm i -g webpack -
局部安装
npm i --save-dev webpack -
全局安装webpack-cli
npm i -g webpack-cli -
局部安装webpack-cli
npm i --save-dev webpack-cli -
npm修改为淘宝镜像
npm config set registry http://registry.npm.taobao.org/ -
还原淘宝镜像
npm config set registry https://registry.npmjs.org/
三：遇到的问题
问题一:
在package.json中显示了webpack的版本号可是运行时仍然不成功
【解决方案】
- 全局安装一下
webpack（退回到总目录下npm i -g webpack） - 删除
node_modules文件重现安装依赖（npm i） - 在本地安装
webpack文件(npm i --save-dev webpack)
问题二:
修改了配置文件package.json中的scripts,运行npm run build报错提示缺少p-try模块
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js"}复制代码 internal/modules/cjs/loader.js:583 throw err; ^Error: Cannot find module 'p-try' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:20:18) at Object.(/Users/xinchen/chenx/vue_Demo/node_modules/_p-limit@2.2.0@p-limit/index.js:2:14) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3)复制代码
【解决方案】
- 删除
package.json文件重新npm init初始化生成package.json文件 - 运行
webpack -v查看本地webpack版本如果提示Permission denied（说明本地没有安装上webpack）执行问题一的解决方案即可 - 确认
devDependencies是否有webpack版本号
"devDependencies": { "css-loader": "^2.1.1", "p-try": "^2.2.0", "vue": "^2.6.10", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.10", "webpack": "^4.32.2", "webpack-cli": "^3.3.2" }复制代码 - 执行
webpack -v能够显示其版本号即可
bogon:vue_Demo xinchen$ webpack -v4.32.2复制代码
问题三:
在运行
webpack --config webpack.config.js命令时出现一下报错
ERROR in ./src/app.vueModule Error (from ./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js):vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. @ ./src/index.js 2:0-27 8:21-24ERROR in ./src/app.vue?vue&type=style&index=0&lang=css& 16:0Module parse failed: Unexpected character '#' (16:0)You may need an appropriate loader to handle this file type.| | > #text { | color: pink;| } @ ./src/app.vue 4:0-63 @ ./src/index.jsERROR in ./src/app.vue?vue&type=template&id=5ef48958& 2:0Module parse failed: Unexpected token (2:0)You may need an appropriate loader to handle this file type.| > { {text}} | @ ./src/app.vue 1:0-82 11:2-8 12:2-17 @ ./src/index.js复制代码 【解决方案】
webpack.config.js这个文件中加入vue-loader插件代码如下
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = { plugins: [ new VueLoaderPlugin() ],}复制代码 - 同时也提示了缺少样式插件执行命令
cnpm i --save-dev style-loader
四：注意的问题
所有的安装依赖项都显示在devDependencies中
"devDependencies": { "css-loader": "^2.1.1", "p-try": "^2.2.0", "vue": "^2.6.10", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.10", "webpack": "^4.32.2", "webpack-cli": "^3.3.2" }复制代码