webpack 4.x 安装

在前端开发界中火得一塌糊涂的模块化开发工具webpack已经出到4.x以上的版本了。趁今天有时间安装了这个工具。由于本人使用的是window系统，以下操作是基于window系统。

一、安装NPM

安装webpack需要用到npm。npm是什么呢？其实就是NodeJS的报管理工具。框架一般都需要依赖各种JS代码包，每次都到网上搜索下载解压安装，比较繁琐。上帝说要有光，于是有了光。NPM应运而生。开发者将自己编写的包或者命令行程序上传到NPM服务器，供别人下载安装使用。NPM是随同NodeJS一起安装的包管理工具，所以安装NodeJS的时候npm就已经安装好。

查看npm版本：

二、安装webpack

接下来就开始安装使用webpack

先创建项目目录结构。下图是我安装完成的目录结构

1、首先要在根目录下生成package.json文件，它会显示以后我们通过npm安装的各种依赖包，我们通过终端进入根目录，执行：npm init

然后终端会让我们输入一堆信息，随便写即可。最后输入yes确认，会发现我们的根目录下自动生成了一个package.json文件。

使用webpack，分为development环境和生产环境。打开package.json，修改一下scripts：

--watch自动监控文件变化

我的package.json文件如下：

package.json生成好了我们先放一放。

2、接下来通过局部安装webpack，执行npm install webpack --save-dev

如果看到了这一页说明局部安装webpack成功了。此时根目录下会出现一个node_modules文件夹。

注意：新版的webpack，需要安装webpack-cli

3、处理完了，来创建webpack.config.js

新版的webpack已经默认了entry和output

默认定义./src/index.js为入口文件，output默认为./dist/main.js

我的webpack.config.js文件如下：

三、loader加载器

webpack是通过loader加载器来管理使用各种插件和工具的，比如我们要使用less，就要通过npm安装less-loader加载器，然后 webpack.config.js文件中进行配置使用，我们要是使用es6语法，就要安装babel-loader来解析成js语法。接下来以babel为例

（1）添加几个依赖包：

npm install babel-core babel-loader babel-preset-env --save-dev

（2）需要在根目录新建一个.babelrc来指定Babel配置

此时在看package.json文件，会发现与之前有所不同：

没错，它显示了我们刚才局部安装的webpack和babel-loader依赖项。文件默认安装到了node_modules目录下。

同时，webpack.config.js文件中添加配置：

接下来你可以尝试在./src/index.js中写一些ES6了，运行npm run dev然后看看转换后的代码。