win7中安装webpack
首先得有git bash,和node.js https://nodejs.org/en/download/ node.js可以在官网上下载
然后找一个目录：我的在D盘新建了一个webpack 这个夹下再新建一个webpack-project
我们现在进入D:\webpack目录下选中webpack-project 右键选择Git Bash Here
然后输入$ npm init 后面一直按回车，直到出现 Is this ok? (yes) 我们在后面输入yes
| xy@xy-PC MINGW64 /d/webpack/webpack-project $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (webpack-project) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to D:\webpack\webpack-project\package.json: { "name": "webpack-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes) yes |
然后需要安装淘宝的镜像：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
把这个复制粘贴进去，大概要等个两三分钟左右，看网速
下面开始安装webpack了：$ cnpm install --save-dev webpack
安装好以后分别输入下面几个命令：
紧接着继续输入
cnpm install --save-dev webpack-cli
cnpm install --global webpack
cnpm install --global webpack-cli
这里的--global表示的是全局安装的意思
--save-dev表示的是把安装的插件，放到package.json的文件中，-dev表示的是在生产环境下使用的
记住，是一个装好了再装下一个，别一次行的复制粘贴所有
最后是查看，输入$ webpack -v 下面会显示版本号，我这个版本号是4.15.1
$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文件
$ mkdir src
进入src中 cd src
创建一个index.js文件
$ touch index.js
在win7里面找到index.js文件，打开，写入东西，我写的是alert("webpack test");
然后cd .. 退回到xy@xy-PC MINGW64 /d/webpack/webpack-project目录
再次输入$ webpack
我们可以看到打包是成功的了，
但是有一个警告，就是说我们没有指定，
环境是生产模式(production)还是开发者模式(development)
我们可以直接输入命令：注意两者选其一就可以了，别两个同时复制粘贴进去
webpack --mode development
webpack --mode production
现在我们来看一下开发者模式
$ webpack --mode development
进入到webpack-project文件夹中，我们可以看到多了一个dist的文件夹，在dist的文件夹中，多了一个main.js的文件
结构很清晰
我们再看一下生产环境下的main.js的文件
$ webpack --mode production
使用 run dev build 打包的文件，结构非常的紧凑，适用于生产环境
发现就像我们以前导入的js或css样式一样，结构很紧凑
最后我们在webpack-project的文件夹下新建一个index.html的文件，看看打包的js数据是否可以运行成功
$ touch index.html
$ vim index.html
successful |