Webpack2 完整踩坑教程(五)

本文基于NODEJS环境，nodejs的安装参考线上的流程：https://nodejs.org/en/ 。

Webpack的核心哲学思想
1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpack通过大量的特性去分割你的代码，生成多个“bundle”片段，并且异步地加载项目的不同部分。

五.使用babel对es6/es7转码

1.安装babel核心模块
npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 –save-dev
各模块的作用如下：

"babel-core" //转换器
"babel-loader" //转换器的加载器
"babel-preset-es2015" //ES2015转码规则
"babel-preset-stage-0" //es7支持，ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个stage-0，stage-1，stage-2，stage-3

2.在项目文件添加.babelrc文件，加入转码规则

{ "presets":["es2015","stage-0"]}

3.修改webpack.config.js文件，添加loaders模块设置

var path=require('path');// 导入路径包
var webpack=require('webpack');
var DEVELOPMENT=process.env.NODE_ENV==='development';
var PRODUCTION=process.env.NODE_ENV==='production';
var entry=PRODUCTION ?
['./src/index.js'] : [
'./src/index.js',
'webpack/hot/dev-server',//开启热重载 hot
'webpack-dev-server/client?http://localhost:8080'//添加webpack-dev-server客户端
];
var plugins=PRODUCTION ? [] : [ new webpack.HotModuleReplacementPlugin()//全局开启代码热替换 如果是CLI这里则不用写
];
module.exports={
entry:entry,//入口文件
plugins:plugins,
module: {
loaders:[
{
test: /\.js$/,
loaders: ["babel-loader"],
exclude: /node_module/
}
]
},
output:{
path:path.join(__dirname,'dist'),// 指定打包之后的文件夹
publicPath:'/dist/',// 指定资源文件引用的目录
filename:'bundle.js'// 指定打包为一个文件 bundle.js
//filename: '[name].js' // 可以打包为多个文件
}
};

4.在index.js中添加es6格式的方法

var messages=require('./messages');
var newMessage=()=>('<p>'+messages.hi +'，'+ messages.event+"</p>");
var app=document.getElementById('app');
app.innerHTML=newMessage();
if(module.hot){//启用热重载
module.hot.accept();
}

5.运行npm run dev测试，并修改数据验证程序。