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

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

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