webpack的安装与使用（一）

（一）webpack安装的两种方式

1.运行 npm i webpack -g 全局安装webpack，这样就能在全局使用webpack命令。

（安装指定版本：npm  install  webpack@   -g        例如：npm install  [email protected]  -g）

2.在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中。

3.删除     在全局下删除    npm  uninstall  webpack  -g

              最好将项目目录下的node-modules一起删除，否则会有残留文件影响下一次的结果。

（二）初步使用webpack打包构建一个项目案例

1.运行npm init 初始化项目，使用 npm 管理项目中的依赖包

2.创建项目基本的目录结构

3.使用cnpm i jquery --save安装jQuery类库

4.创建main.js作为项目js入口文件

main.js中：

//导入jQuery类库

import $ from 'jquery'

console.log('ok');

5.直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的js语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换成低级的浏览器能识别的语法；

6.运行 webpack 入口文件路径 输出文件路径 对main.js进行处理。

webpack ./src/main.js  ./dist/bundle.js

再在index.html引入bundle.js查看效果

 

（三）遇到的问题：

1.运行了webpack ./src/main.js  ./dist/bundle.js 后出现了'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件。

网上说使用webpack ./src/main.js  -o ./dist/bundle.js

换成了这个之后出现同样的错误。

后来发现是全局没有安装webpack(虽然我在项目根目录安装了webpack但还是出现了这种情况)，在全局安装webpack之后，运行webpack ./src/main.js  -o ./dist/bundle.js 提示了

One CLI for webpack must be installed. These are recommended choices, delivered
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): 

选择yes

后来卡住了，我就退出了安装过程

2.在全局环境下，执行webpack --version 

还是提示Do you want to install 'webpack-cli' (yes/no): 

我选了yes，等到安装完成之后，提示：

npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

在网上查找资料发现，是版本不兼容的问题

建议不要运行npm i  XXX  -g(-d) ，一定要指定版本，尽量低版本，也不最新版本，不然会导致不兼容和指令不一样的问题。

所以我就卸载了之前的版本，重新下载了一个3.x.x的版本

npm install  [email protected]  -g

再重新打包bundle.js就成功了