webpack安装问题

一：基于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.<anonymous> (/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 -v
4.32.2
复制代码

问题三:

在运行webpack --config webpack.config.js命令时出现一下报错

ERROR in ./src/app.vue
Module 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-24

ERROR in ./src/app.vue?vue&type=style&index=0&lang=css& 16:0
Module 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.js

ERROR in ./src/app.vue?vue&type=template&id=5ef48958& 2:0
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
| 
> <div id="text">{{text}}</div>
| 
 @ ./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"
  }
复制代码