webpack学习之七,搭建一个学习es6的项目

关于目标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"
}
}

7.运行 npm run dev(开发环境),npm run build(生产环境)