适合有一定经验的同学观看参考
步骤：
1.项目背景
2.安装环境
3.编写代码
4.建立配置文件、使用Loaders：css-loader、style-loader、less-loader、编码es6、使用插件
5.开发测试、自动刷新、兼容IE；整合前端资源到Yii2页面中、使用代理自动刷新浏览
6.使用第三方库如jQuery
7.压缩js和css发布
项目背景
项目是以后端为主，以Yii2为核心的后端框架，站点考虑SEO和快速开发，使用的是PHP渲染前端页面，为多页应用，每个页面根据功能需求有对应的js文件，直接通过Yii2管理js和css的引入，但是为了更好管理前端功能模块，提高开发效率，使得后续开发和迭代更加轻松，特别是JS，我们希望通过ES6来实现模块化的开发，更加规范和结构清晰，所以，我们决定使用less编写css、es6编写js功能，使用webpack来打包和加载less和es6的。第一次使用webpack，花了一天时间研究，针对我的项目情况做的前端核心技术分享，希望对有同样需求的兄弟有所启发，文中我仅提到了核心技术点，详细需要大家展开去探索，其中肯定有很多不完善的地方，望各位大侠多多赐教。另外，代码复制请注意空格，粘贴代码过来被自动去除空格了。。。。
基础知识参考文档：//www.greatytc.com/p/42e11515c10f，多谢兄弟分享。
安装环境
需要首先安装好node和npm，接着需要安装：
项目根文件夹下面如果没有package.json文件，那么需要初始化创建package.json，命令：npm init
1.webpack（核心打包器，建议全局安装，npm install webpack -g）
2.babel-core、babel-loader、babel-preset-es2015（把es6转码为es5兼容不支持es6的浏览器，安装到当前目录，保存在package.json的devDependencies，npm install babel-core babel-loader babel-preset-es2015 --save-dev）
3.less、css-loader、less-loader、style-loader（处理less、css的加载器，类似2安装）
4.extract-text-webpack-plugin（抽取css为独立的文件，类似2安装）
5.browser-sync-webpack-plugin、browser-sync（方便代理测试页面，类似2安装）
6.glob（用于匹配目录文件，类似2安装）
编写前端代码
在项目根目录下建立的文件夹和文件结构如下图，src下面的就是前端的开发目录结构，js的入口文件：main.es6、user.es6、video.es6等，modules里面的模块将被他们调用；类似，less中的common.less、core.less、style.less为3个独立的less文件，modules里面的less代码会被他们根据引用
接着我们先写几个测试代码：
1.写一个es6基类Base.es6，其他的模块类都继承这个；
我使用了.es6自定义的后缀名，后面编译打包的时候需要加入到webpack配置文件的扩展名列表里面
2.继承了Base模块的其他几个模块截图：
classBase{
constructor(name) {
this.URL_PREFIX='http://we.9xkd.com';
console.log('模块基类构造函数');
Base.init();
};
//静态方法子类不能重写和继承
staticinit () {
console.log('模块基类方法init');
};
begin(){
console.log('模块基类可以重写的方法begin');
}
}
export defaultBase;
上面这些都是入口可能调用的模块，
下面的是3个入口JS文件截图：
require('es6-promise').polyfill();
//引入LESS，使得webpack打包成css，只要在一个入口引入即可
import"../less/common.less";
import"../less/core.less";
import"../less/style.less";
//调用菜单
importNavfrom'./modules/Nav';
constnav=newNav('菜单');
nav.begin();
nav.nav();
//异步加载某个模块，加个10s后自动加载，方便看效果
setTimeout(function() {
//异步加载的代码会自动打包成0.js、1.js....等这样的外部模块
require.ensure([],function(require) {
constvideo=require('./modules/Video').default;
letmyVideo=newvideo();
myVideo.video();
});
},10000);
接着下来就是CSS中也定义几个样式用来测试
建立配置文件、使用Loaders：style-loader、css-loader、less-loader、babel-loader编码es6、使用插件ExtractTextPlugin提取css为单独的css
建立webpack的配置文件：
如果不编写也可以直接执行，只是手工在命令提示符里面打实在痛苦，我们把一些执行配置也在package.json中，方便命令提示符快速的启动webpack。
配置文件主要考虑如下因素：
1.多入口文件，写一个函数遍历入口文件夹的文件自动读取出来，返回一个入口对象，然后编译打包出多个；我的做法是，入口的模块单独放一个文件夹，其他的功能模块通过这些入口模块调用
2.整个站点编译出来的css大概有三个，一个是共用的：common.css，一个是核心页面的css：core.css，一个是用户中心和其他页面的style.css；通过Yii2直接引入页面头部，比通过webpack加载css快速得多，所以，我的做法是：建立3个less，common.less，core.less，style.less，然后N个小的less独立样式被引入到这三个样式中，在webpack中某个入口文件引入这三个样式less，接着通过webpack的配置less、css、style的加载器以及ExtractTextPlugin插件打包抽离成独立的css
3.编码es6，转换为es5，同时通过插件抽取相同的js到commons.js里面
最终这个配置文件如下：
letglob=require('glob');
letwebpack=require('webpack');
letpublishFolder='xkd_1_1';//发布到文件夹名，要与PHP一致todo根据发布版本需要更改
//es6和Less文件存放处
constsrcolder='./src/';
constes6Folder=srcolder+'es6/';
//浏览器自动刷新
letBrowserSyncPlugin=require('browser-sync-webpack-plugin');
//CSS抽取插件
letExtractTextPlugin=require("extract-text-webpack-plugin");
constextractComm=newExtractTextPlugin('css/common.css');
constextractCore=newExtractTextPlugin('css/core.css');
constextractStyle=newExtractTextPlugin('css/style.css');
/**
*编译less的公用函数配置
*@paramobj
*@paramtest
*@returns{{test: *, use: *}}
*/
cssRuleComm=(obj,test)=> {
return{
test:test,
use:obj.extract({
fallback:"style-loader",
use:[{
loader:'css-loader',
options:{}
},"less-loader"],
allChunks:true
})
};
};
getEntry=() => {
letentry={};
letnLength=es6Folder.length-1;
letsrcDirName=es6Folder+'*.es6';
glob.sync(srcDirName).forEach(function(name) {
letn=name.slice(name.lastIndexOf(es6Folder)+nLength+1,name.length-4);
entry[n]=name;
});
returnentry;
};
module.exports={
resolve:{
extensions:[".es6",".js",".webpack.js",".web.js",".js",".json"],//加入es6自定义扩展名后缀
},
entry:getEntry(),//入口文件
output:{
path:__dirname+"/frontend/web/"+publishFolder,//打包后的文件存放的地方
filename:"js/[name].js",//打包后输出文件的文件名
publicPath:publishFolder+'/',//指定资源文件引用的目录
// chunkFilename:'js/[name].[chunkhash:8].js'
},
module:{
rules:[
{
test:/(\.es6)$/,
use:{
loader:"babel-loader",
options:{
presets:[
"es2015"
]
},
},
exclude:/node_modules/
},
cssRuleComm(extractComm,/common.less$/i),
cssRuleComm(extractCore,/core.less$/i),
cssRuleComm(extractStyle,/style.less$/i),
]
},
plugins:[
newwebpack.optimize.CommonsChunkPlugin({
name:'commons',
filename:"js/commons.js",
}),
extractComm,
extractCore,
extractStyle,
newBrowserSyncPlugin({
host:'127.0.0.1',
port:8080,
// server: { baseDir: [srcolder + 'public'] }
//请求后台的话，就使用代理
proxy:{
target:"http://we.9xkd.com",
ws:true
}
})
]
};
开发测试、自动刷新、代理测试，发布和整合前端资源到Yii2页面中
编写好代码，webpack的配置文件也编写好了，那么我们先在src目录下来建立一个public目录准备先测试测试看看是否运行起来；webpack的dev server插件是基于内存编译的，也就是说我们每次修改es6和less文件，dev server都不会打包写入到文件的，而我想要的效果是每次更改less/es6都能够自动发布文件，然后自动刷新浏览器，那么我加入了browser-sync-webpack-plugin插件，使用webpack --watch命令执行，每次文件改动就会自动打包最新的代码，并刷新浏览器；
注意：需要再webpack中配置好这些文件的发布路径呃，上图红框选中的。
接着我想实现把css和js发布到Yii2的项目对应的前端资源文件夹下面，那么我只要把webpack发布目录修改一下即可，然后通过Yii2来引入对应的css和js文件，然后我需要通过browser-sync-webpack-plugin插件的代理机制来打开Yii的引用前端资源的对应页面，这样每次修改es6和less就会在yii2项目中自动刷新显示出来
经过测试，我们会发现在IE9浏览器下面我们的异步加载出现了错误，没有办法加载起来，是因为ES6使用异步加载模块是使用Promise机制，但是IE不支持，所以需要加入es6-promise进行兼容，使用详见：https://github.com/stefanpenner/es6-promise，更多webpack兼容参见：https://segmentfault.com/a/1190000009613296
使用第三方库如jQuery
我这里的使用第三方的如jQuery、Vue.js等类库，是通过PHP直接引入的全局资源，可以直接通过往常的jQuery、Vue.js的用法在ES6模块中直接使用即可。
压缩js和css发布
我们把项目开发完成后，我们一般都需要把对应的js、css文件进行压缩发布正式版，其实这个在webpack中很简单就可以做到，css只要设置一个选项minimize: true即可，js压缩需要使用webpack插件：webpack.optimize.UglifyJsPlugin，建议新建一个发布用的webpack配置文件，具体如下图
整个以PHP为主渲染、webpack配合前端开发的探索到此暂告一段落，随着webpack深入使用会再分享更多，如果需要学习更多最新技术知识，欢迎来侠课岛学习：9xkd.com，我也会分享更多有价值的内容到简书上面。
