搭建es6+devServer简单开发环境

搭建es6+devServer简单开发环境

搭建基于es6和热加载的前端简单开发环境，适合demo类小项目，这样就不用依赖browsersync等多余的东西

目录结构

/src

• index.js
• index.html

/dist

安装依赖

注意版本，尤其是babel，可去babel的npm地址查看，那里不会错

#bebal相关
yarn add babel-core babel-loader babel-preset-env

# webpack相关
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin

package.json

{
  "name": "design-pattern",
  "version": "1.0.0",
  "description": "js设计模式的学习深入",
  "main": "index.js",
  "author": "axin <laputacloud@163.com>",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }
}

webpack.dev.config.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: './dist/bundle.js'
  },

  module: {
    rules: [{
      test: /\.js?$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader'
    }]
  },

  plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    })
  ],

  devServer: {
    contentBase: path.join(__dirname, './dist'),
    open: true, // 自动打开浏览器
    port: 6688, // devServer对应的端口号
  }
}

.babelrc 可根据需要配置

{
  "presets": ["env"]
}

然后就可以执行npm run dev就可以开启开发环境