1、编译ES6

1/创建文件夹，在命令行执行npm init。然后安装babel-loader

npm install babel-loader@8.0.0 @babel/core @babel/preset-env复制代码

2/在文件夹下创建webpack.config.js，配置相关属性

module.exports = {entry: {app: './app'},output: {filename: '[name]-[hash:5].js'},module: {rules: [{test: /\.js$/,exclude: '/node-modules/',use: 'babel-loader'}]}}复制代码

3/在入口文件app.js中编写ES6有关代码

let func = () => { }const MUN = 45let arr = [1, 2, 4]let arrB = arr.map(item => item * 2)console.log('new Set(arrB)' + new Set(arrB))复制代码

4/配置babel的preset。在文件.babelrc中。在target属性中可以设置环境（浏览器或者node）

{  "presets": [    [      "@babel/preset-env",      {        "targets": {          "chrome": "52"        }      }    ]  ]}复制代码

4/在命令行执行打包命令webpack。打包成功后，在打包后的文件中查看被babel编译后的代码。其中箭头函数变成function，let和const被编译成var

var func = function func() {};var MUN = 45;var arr = [1, 2, 4];var arrB = arr.map(function (item) {  return item * 2;});console.log('new Set(arrB)' + new Set(arrB));复制代码

5/在一些浏览器版本中，有一些函数和方法（Generator,Set,Map,Array.from,Array.prototype.includes）没有办法利用babel转换，这个时候就需要用到相关的插件。可以选择以下其中一个使用即可：

①使用babel-polyfill插件。特点是全局垫片，为应用为准备的。先安装然后在项目根目录中使用

//安装
npm install babel-polyfill --save
//使用：在项目根目录中导入
import 'babel-polyfill'复制代码

②使用Babel Runtime Transform插件。特点是局部垫片，为开发框架使用。先安装然后在.babelrc配置文件中配置

安装@babel版本，是确保和我们刚开始的时候安装babel-loader@8.0.0中保持一致，不然容易报版本错误

//安装
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
//配置：在.babelrc中配置
{"plugins": ["@babel/transform-runtime"]
}复制代码

2、打包公共代码

利用CommonsChunkPlugin插件对公共代码进行代码。

对单页面应用的打包是没有用的，因为单页面一般是利用懒加载的，有其他的打包方式。

①对多页面应用的普通打包

import path = require('path')                                               webpack.config.js
import webpack = require('webpack')
module.exports={entry:{'pageA':'./src/pageA','pageB':'./src/pageB'},output:{path:path.resolve(__dirname,'./dist'),filename:'[name].bundle.js',chunkFilename:'[name].chunk.js'},plugins:[new webpack.optimize.CommonsChunkPlugin({name:'common',minChunks:2})]
}复制代码

在命令行对多页面应用进行webpack打包：

②对第三方插件打包

module.exports={entry:{'pageA':'./src/pageA','pageB':'./src/pageB','vendor':['lodash']},...plugins:[new webpack.optimize.CommonsChunkPlugin({name:'vendor',minChunks:Infinity})]
}复制代码

命令行webpack打包后：

③把webpack代码提取出来

module.exports={...plugins:[new webpack.optimize.CommonsChunkPlugin({ // webpackname:'manifest',minChunks:Infinity})new webpack.optimize.CommonsChunkPlugin({ // 第三插件name:'vendor',minChunks:Infinity})]
}复制代码

在命令行webpack打包：

④把业务公共代码、第三方插件和webpack各自提取出来

module.exports={...plugins:[new webpack.optimize.CommonsChunkPlugin({ //业务公共代码name:'common',minChunks:2,chunks:['pageA','pageB']})new webpack.optimize.CommonsChunkPlugin({ //第三方插件+webpacknames:['vendor','manifest'],minChunks:Infinity})]
}复制代码

webpack打包：

3、代码分割和懒加载

（1）代码分割之前

import path = require('path')                                               webpack.config.js
import webpack = require('webpack')
module.exports={entry:{'pageA':'./src/pageA'},output:{path:path.resolve(__dirname,'./dist'),filename:'[name].bundle.js',chunkFilename:'[name].chunk.js'}
}复制代码

webpack打包只有一个：

（2）代码分割之后：利用require.ensure把第三方模块分割出来

利用webpack.method中有一个require.ensure()方法来进行代码分割。

impoor subPageA from './subPageA'                                 pageA.js
import subPageB from './subPageB'
//动态加载。加载并不表示执行，需要在第二个参数callback中require一下才算真正的执行。
//第一个参数表示加载模块，第二个是成功回调，第三个是分支名称
require.ensure(['lodash'],function(){var _ = require('lodash')_.join(['1','2'],'3')
},'vendor')
export default pageA复制代码

webpack打包有两个分支：

（3）代码分割之后：利用require.ensure把业务代码分割出来

//动态加载业务模块 (根据逻辑按需加载不同的业务模块)                                 pageA.js
if(page==='subPageA'){require.ensure(['./subPageA'],function(){var subPageA = require('./subPageA')},'subPageA')
}else if(){require.ensure(['./subPageB'],function(){var subPageB = require('./subPageB')},'subPageB')
}
...
export default PageA复制代码

webpack打包之后：

(4)代码分割：利用import()方法分割

返回一个Promise，在回调then方法中直接使用。利用注释的方法给分支设置名称，如果分支名一样，则webpack打包进一个分支

if(page==='subPageA'){                                                      pageA.jsimport(/* webpackChunkName:'subPageA' */'./subPageA').then(function(subPageA){console.log(subPageA)})
}else if(page==='subPageB'){import(/* webpacjChunkName:'subPageB' */'./subPageB').then(function(subPageB){console.log(subPageB)})
}
export default pageA复制代码

webpack打包结果如下：

(5)异步代码分割+公共代码提取(结合CommonsChunkPlugin插件)

module.exports={                                                           webpack.config.jsentry:{'pageA':'./src/pageA','pageB':'./src/pageB','vendor':['lodash']},...plugins:[new webpack.optimize.CommonsChunkPlugin({async:'async-common',children:tureminChunks:2}),new webpack.optimize.CommonChunkPlugin({name:['vendor','manifest'],minChunks:'Infinity'})]
}复制代码

webpack打包结果：

3、处理css

（1）style-loader   生成style标签插入到heade标签中

style-loader    将css文件中的css代码生成的<style>放到<head>标签中

npm install style-loader --save-dev
// webpack.config.js
{module:{rules:[{test:/\.css$/,use:[{loader:'style-loader'},{loader:'css-loader'}]}]}
}复制代码

style-loader/url    在head标签中添加一个link取代生成的style标签

// webpack.config.js
{module:{rules:[{test:/\.css$/,use:[{loader:'style-loader/url'},{loader:'file-loader'}]}]}
}复制代码

style-loader/useable    控制style标签的可用或不可用属性

//app.js
import base from './css/base.css'
var flag = false
setInterval(function(){if(flag){base.use()  //可用样式}else{base.unuse() //不可用样式}
},500)//webpack.config.js
{module:{rules:[{test:/\.css$/,use:[{loader:'style-loader/useable'},{loader:'css-loader'}]}]}
}
复制代码

style-loader的options：主要看transform属性，是个传入原始css的函数，返回修改过的css。其他的属性可查看文档。

//webpack.config.js
{module:{rules:[{test:/\.css$/,use:[{loader:'style-loader',options:{transform:'css.transform.js'    //相当于webpack.config.js目录下的的文件} },{loader:'css-loader'}]}]}
}//css.transform.js(一个简单的demo)module.exports=function(css){//改变原始的css(跟环境变量产生联系)if(window.innerWidth>=768){return css.replace('red','green')}else{return css.replace('red','yellow')}
}复制代码

（2）css-loader

css-style像import和require()一样解释@import和url()

//安装
npm install --save-dev css-loader
复制代码

//webpack.config.js
{loader:'css-loader',options:{modules:true,localIdentName:'[path][name]-[loca]-[hase:base64:5]'    }
}复制代码

//base.css
.box{composes:bigBox from './common.css'  /* 引入common模块的css样式(老的写法) */...
}复制代码

（3）配置sass或者less,看官网文档即可

安装less以及依赖
pm install --save-dev less-loader less
复制代码

安装sass以及依赖
npm install sass-loader node-sass  --save-dev
复制代码

（4）提取css代码