目标
- 1.自动打包编译
- 2.热加载热替换
- 3.能够将写的代码转换为es5
写在前面
关于目标1和2在前面的学习的webpack中都已经能够做了,下面主要使用Babel转换es6代码
1.项目目录
|-ECMA 6
|-src
|-index.js
|-webpack.base.js
|-webpack.dev.js
|-webpack.prod.js
|-.babelrc
|-index.html
|-package.json
2.webpack.base.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:'./src/index.js',
module:{
rules:[
{
// 所有的js文件都由babel-loader编译为es5
test:/\.js$/,
use:'babel-loader'
}
]
},
plugins:[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title:'ECMA Script 6'
})
],
output:{
filename:'[name].bundle.js',
path:path.resolve(__dirname,'dist')
}
};
3.webpack.dev.js
var path = require('path');
var webpack = require('webpack');
var merge = require('webpack-merge');
var base = require('./webpack.base.js');
module.exports = merge(base,{
devtool:'inline-source-map',
devServer:{
contentBase:'./dist',
hot:true
},
plugins:[
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
});
4.webpack.prod.js
var merge = require('webpack-merge');
var base = require('./webpack.base.js');
module.exports = merge(base,{
devtool:'source-map'
});
5. .babelrc
{
"presets":[
"latest",
"stage-2"
],
"plugins":[]
}
6.package.json
{
"name": "es6_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open --config ./webpack.dev.js",
"build": "webpack --config ./webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.18",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1",
"webpack-merge": "^4.1.1"
}
}