window7安装webpack4.8

1、首先我们在桌面新建一个文件夹，命名为webpack-project,之后打开git bash(没有的话，在window系统下，也是可以使用cmd命名的)

2、输入 npm init 一直点回车，直到出现 Is this OK？输入yes回车npm init 初始化的目的，就是新建一个package.json的文件

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

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

5、紧接着继续输入cnpm install --sa箪滹埘麽ve-dev webpack-clicnpm install --global webpack艘早祓胂cnpm install --global webpack-cli这里的--global表示的是全局安装的意思--save-dev表示的是把安装的插件，放到package.json的文件中，-dev表示的是在生产环境下使用的

6、我们查看一下版本号$ webpack -v ,如果出现版本号，那么就说明webpack已经安装成功了

7、$webpack使用webpack的命令出现错误ERROR in Entr鲻戟缒男y module not found: Error: Can't resolve './src' in 'C:\Users\Administrator\Desktop\webpack-project出现问题的原因是，我们在webpack-project的项目中没有找到入口文件 ./srcwebpack的入口文件默认是./src/index.js为此我们需要在webpack-project的项目中，新建一个src的文件夹，在其文件夹下新建一个index.js文件

8、在src/index.js的文件夹中，写入东西，这里我写的内容是 alert("webpack test");我们回到g足毂忍珩it bash的命令行的界面再次输入webpack我们可以看到打包是成功的了，但是有一个警告，就是说我们没有指定，环境是生产模式(production)还是开发者模式(development)

9、也可以在package.json的文件中添加下面的命令"scripts": 辘腋粪梯{ "dev": "webpack --mode development", "build": "webpack --mode production"},在package.json加入这两行的目的就是为了我们可以使用npm run devnpm run build这两个命名如果不配置的话我们也可以使用webpack --mode developmentwebpack --mode production得到的效果是 一样的

10、现在我们来看一下开发者模式$ npm run dev进入到webpack-project文件夹中，我们可以看到多了一个dist的文件夹，在dist的文件夹中，多了一个main.js的文件

11、我们使用打开main.js的文件，这是webpack默认输出的js文件格式

12、在着我们再看一下生产环境下的main.js的文件$ run dev build使用 run dev build 打包的文件，结构非常的紧凑，适用于生产环境

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

14、最后在浏览器输出，成功！