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({ // webpack
name:'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({ //第三方插件+webpack
names:['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.js
import(/* 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.js
entry:{
'pageA':'./src/pageA',
'pageB':'./src/pageB',
'vendor':['lodash']
},
...
plugins:[
new webpack.optimize.CommonsChunkPlugin({
async:'async-common',
children:ture
minChunks: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-loadercss-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代码
扫一扫
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
