搭建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就能夠開啓開發環境