使用webpack配置es6开发环境

使用webpack配置es6开发环境

首先搭建一个es6的开发环境，见链接: link.

全局安装webpack

npm install -g webpack

安装依赖

babel-core、babel-loader、babel-preset-es2015、html-webpack-plugin、webpack、webpack-dev-server
其中babel-core、babel-loader、babel-preset-es2015这几个依赖包主要是用于解析ES6并且转换成ES5的，html-webpack-plugin主要是用于webpack运行html，webpack、webpack-dev-server主要是用于搭建本地服务环境，其中webpack-dev-server是用于热更新的（所谓热更新就是当你修改了代码，不用再去刷新浏览器即可实时运行修改后的代码）

package.json

{
  "name": "webvrsix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "server": "webpack-dev-server --open",
    "build": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
  }
}

创建webpack配置文件webpack.config.js文件

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: path.join(__dirname, "src"),
  output: {
    filename: "public/main.js", //输出目录及文件名
  },
  module: {
    loaders: [{ test: /\.js$/, loader: "babel-loader" }],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devtool: "eval-source-map",
  devServer: {
    contentBase: "./public", //本地服务器所加载的页面所在的目录
    historyApiFallback: true, //不跳转
    inline: true, //实时刷新
    port: 8011, //http端口
  },
};
···
这样webpack的环境就配置好了