window7安装webpack4.8

webpack版本更新之后，安装老是呈现问题，此刻小编就标的目的大师，介绍一种方式

东西/原料

• window7
• git bash
• nodejs
• npm

方式/步调

1. 1

   起首我们在桌面新建一个文件夹，定名为webpack-project,之后打开git bash

   (没有的话，在window系统下，也是可以利用cmd定名的)

2. 2

   输入 npm init 一向点回车，直到呈现 Is this OK？输入yes回车

   npm init 初始化的目标，就是新建一个package.json的文件

   
3. 3

   此时我们看一下文件夹的里面，多了一个package.json的文件

   
4. 4

   回到我们的git bash 在git bash的号令行，输入 cnpm install --save-dev webpack (这里申明一下 cnpm是淘宝的镜像，不懂的小伙伴，可以百度一下)

   
5. 5

   紧接着继续输入

   cnpm install --save-dev webpack-cli

   cnpm install --global webpack

   cnpm install --global webpack-cli 

   这里的--global暗示的是全局安装的意思

   --save-dev暗示的是把安装的插件，放到package.json的文件中，-dev暗示的是在出产情况下利用的

   
6. 6

   我们查看一下版本号

   $ webpack -v ,若是呈现版本号，那么就申明webpack已经安装当作功了

   
7. 7

   $webpack 

   利用webpack的号令呈现错误

   ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Administrator\Desktop\webpack-project

   呈现问题的原因是，我们在webpack-project的项目中没有找到进口文件 ./src

   webpack的进口文件默认是./src/index.js

   为此我们需要在webpack-project的项目中，新建一个src的文件夹，在其文件夹下新建一个index.js文件

   
8. 8

   在src/index.js的文件夹中，写入工具，这里我写的内容是 alert("webpack test");

   我们回到git bash的号令行的界面

   再次输入webpack

   我们可以看到打包是当作功的了，可是有一个警告，就是说我们没有指心猿意马，情况是出产模式(production)仍是开辟者模式(development)

   
9. 9

   也可以在package.json的文件中添加下面的号令

    "scripts": {  

     "dev": "webpack --mode development",  

     "build": "webpack --mode production"  

   }, 

   在package.json插手这两行的目标就是为了我们可以利用

   npm run dev

   npm run build 

   这两个定名

   若是不设置装备摆设的话我们也可以利用

   webpack --mode development

   webpack --mode production

   获得的结果是 一样的

   
10. 10

    此刻我们来看一下开辟者模式

    $ npm run dev

    进入到webpack-project文件夹中，我们可以看到多了一个dist的文件夹，在dist的文件夹中，多了一个main.js的文件

    
11. 11

    我们利用打开main.js的文件，这是webpack默认输出的js文件格局

    
12. 12

    在着我们再看一下出产情况下的main.js的文件

    $ run dev build

    利用 run dev build 打包的文件，布局很是的紧凑，合用于出产情况

    
13. 13

    最后我们在webpack-project的文件夹下新建一个index.html的文件，看看打包的js数据是否可以运行当作功

    $ touch index.html

    $ vim index.html

    
14. 14

    最后在浏览器输出，当作功！