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然后看看转换后的代码。