webpack 配置之入门一

webpack 是一个现代 Javascript 应用程序的模块打包器（module bundler )，它里面的功能比较多，核心模块可分为模块打包、代码分割与按需加载。这里只简单讲解下 webpack 的入门配置。

一：本地安装 webpack

　　一、全局安装

　　　　在全局安装以前首先须要下载 node （去node官网下载便可） 使用 node -v 和 npm -v 来查看下载的版本。这里不做详细介绍。

　　　　管理员模式打开cmd 或 git 命令行工具：npm install webpack -g 或使用指定版本 npm install webpack@3.3.0 -g 建议使用后者，由于 webpack 更新太快，最新版本修改会出现报错现象。在实际开发中仍是使用固定版本，后期会介绍版本更新。

　　2、项目配置

　　　　接下来，就要在项目中使用 webpack 了， 首先经过 npm init 来新建 package.json 文件 ，这时候会让你输入name、version等基本信息，可默认回车便可。

　　　　接下来在 package.json 中安装 webpack，经过命令：npm install webpack@3.3.0 --sava-dev （和全局安装的版本保持一致，否则会出现版本冲突，可能会在项目中报错）以下图：

 

　　　　这时候可在 package.json 文件中查看安装的 webpack 版本，也可以使用命令行 webpack -v 来查看。这样就配置成功一个简单的 webpack 了，使用 webpack -h 能够查看 webpack 的主要命令了。

　　　　其实在每一个项目中都必须配置有一个 webpack.config.js ，它的做用如同常规的 gulpfile.js/Gruntfile.js ，其实它就是一个配置项，来告诉 webpack 它须要作什么。在项目根目录下新建 webpack.config.js 文件，接下来就是配置 webpack.config.js 了。

 

 二：配置 webpack.config.js

　　1.配置最简单的打包 Js 文件

　　　在项目建立一些 js 文件，在 js 文件中写上简单的 js，以下图所示，这时咱们有二种方法来编译打包 app.js 文件，

　　　第一种直接在命令行中使用 webpack app.js bundle.js 这时会生产 bundle.js ,

　　   第二种是配置简单的 webpack.config.js 文件，在根目录下新建 webpack.config.js 使用ComonJs 模型 module.exports = {   entry: { app: './app.js'}, output: { filename:  '[name].[hash:5].js' }}  这是使用简单的哈希算法来生产 js 文件，

　　   在编写好 config.js 以后，在 命令行中使用 webpack 直接编译打包就行。在这里若是新建的配置文件命名不是 webpack.config.js，如新建的配置文件为 webpack.conf.js 在编译时使用命令 webpack --config webpack.conf.js 来编译打包。

 

 　　2.ES6 语法的解析

　　　在项目咱们编写 js 代码时经常使用到 ES6 语法，可是在一些低版本浏览器上对 ES6 的支持性不是很好，这是咱们就引用 babel 来编译 ES6 语法，使用 babel 是可根据本身的状况来安装不一样的版本，如新版本：npm install babel-loader@8.0.0-beta.0 @babel/core  

　　　或普通版本 npm install --save-dev babel-loader babel-core  安装完成以后咱们须要配置 config.js 文件以下，另外除了引用 babel-loader 以外，咱们还须要安装 babel-preset，它的做用是将你的 js 按什么标准来解析的，常见为 es-2015 es-2017 ... env　　等，其中 env 包含上面的版本。安装 babel-preset :  新版本-- npm install @babel/preset-env --save-dev    普通版本-- npm install babel-preset-env --save-dev    

　　　在 preset 可有针对浏览器解析的 broswers 可制定解析的标准：如 ' > 1%'  ' last 2 versions '  或 制定浏览器版本。这样咱们就能够解析 ES6 语法了。可是这样解析对许多函数与方法不能处理，如： Generator Set Map Array.form Array.prototype.includes等,这时候咱们须要借助插件来完成。经常使用的有 babel Polyfill  与 babel runtime transform。

　　　　

 

 　　　babel polyfill 简单来说是为应用开发准备的，是会影响全局的，安装-- npm install babel-polyfill --save 。使用也很是简单，只要在公共 js 中引用就行。如： import  "babel-polyfill"。而 babel runtime transform 是为开发框架准备的，它只会局部使用，不会影响全局。 新版本安装-- npm install @babel/plugin-transform-runtime --save-dev     npm install @babel/runtime --save         普通安装-- npm install babel-plugin-transform-runtime --save-dev      npm install babel-runtime --save 。使用方法是在根目录下新建  .babelrc 文件，该文件是一个 json 对象， 将 config.js 中的 presets 拷贝到 .babelrc 下改为 json 格式，可是要注意的是若是使用如 chrome 版本 56 的可能也不会转换为这些函数。以下，而后 webpack 运行。

 　　　　　

　　3.typescript 的编译

　　　typescript 是有微软开发开源的 js 超集，咱们在项目中可能会使用到 typescript，因此咱们须要在 webpack 里配置解析 typescript，

　　　未完待续........

　　4.打包公共代码

 　　  在实际开发中，咱们一般须要提取公共部分，减小资源的请求，这时咱们就要提取公共的代码了，在 webpack 中咱们是使用 webpack 内置组件 webpack.optimize.CommonsChunkPlugin 来实现。

　　  配置：{    plugins: [  new webpack.optimize.CommonsChunkPlugin( option ) ]  }  option 有许多参数，如 options.name Or options.names 是指提取的选定名称， options.filename  打包的名称 

　　 options.minChunks 打包的规则，但是数字、Infinity、函数等。options.chunks [] 提取代码的范围  options.children......等。

　     如：在 pageA 页面 引用 subPageA 与 subPageB ，在 PageB 页面也和 PageA 同样，在 subPageA 与 subPageB 中都引用了 moduleA。且在页面中还有可能引用了第三方插件 （lodash），具体配置说明以下：

 

　　5.代码切割与懒加载

 　　  在实际开发中，咱们会遇到许多问题，在 webpack 中有一个代码分割能力，它的主要做用是：一、分离业务代码与第三方依赖 ，二、分离业务代码、业务公共代码与第三方依赖，三、分离首次加载与访问后加载。

　　　实现的方法可经过 webpack 内置方法 webpack methods 来实现，也能够经过 ES 2015 Loader Spec 动态加载方式。

　　　如：在单页面应用中，PageA 页面引用了子页面 subPageA 与 subPageB，同时引用了第三方插件 lodash，在 subPageA 与 subPageB 页面中引用了 moduleA，在咱们不使用 内置插件 webpack.optimize.CommonsChunkPlugin 的状况下，咱们直接改变页面请求加载的资源，以下：在这里咱们使用 require.include 来加载 moduleA，由于是单页面应用，提早加载 moduleA，使之 moduleA 成为公共部分， subPageA 与 subPageB 中只有本身，不会再加载 moduleA。并且经过第三方插件加载的 lodash 会被单独加载成 vendor.chunk.js，使之分离。　　

　　   

　　   在项目中，咱们可结合 plugin 来实现代码的打包与分割，如：在 PageA 和 PageB 页面引用了子页面 subPageA 与 subPageB，同时引用了第三方插件 lodash，在 subPageA 与 subPageB 页面中引用了 moduleA，这是但是配合 plugin 来提取公共代码。

          未完待续........