安裝node和npm后

1怕磨、 初始化npm環(huán)境挺尾，安裝webpack

npm init
npm install webpack webpack-cli --save-dev

根文件夾建立一個src文件夾锨苏，里面添加index.js文件，再在根目錄添加webpack.dev.config.js

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

npm run dev即可打包index

2、安裝webpack-dev-server

cnpm i webpack-dev-server html-webpack-plugin --save-dev

根目錄創(chuàng)建index.html文件

webpack.dev.config.js代碼更改為

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: './release/bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, './release'), // 根目錄
        open: true, // 根目錄自動打開瀏覽器
        port: 9000
    }
}

package.json代碼更改

{
  "name": "hot-loaded",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },
  "author": "Tony",
  "license": "ISC",
  "devDependencies": {
    "follow-redirects": "^1.5.9",
    "handle-thing": "^1.2.5",
    "html-webpack-plugin": "^3.2.0",
    "http-deceiver": "^1.2.7",
    "http-proxy": "^1.17.0",
    "mime": "^2.3.1",
    "node-forge": "^0.7.6",
    "spdy-transport": "^2.1.0",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

然后執(zhí)行cnpm i 再執(zhí)行 npm run dev 即可看到在瀏覽器上自動打開氢哮。至此已經(jīng)完成熱加載

3、安裝babel

cnpm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

index.js

class Person {
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
}

let p  = new Person('sdfdsd');
alert(p.getName());

根目錄新建.babelrc

{
    "presets": [
        "es2015", "latest"
    ],
    "plugins": [

    ]
}

webpack.dec,config.js

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: './release/bundle.js'
    },
    // es6轉(zhuǎn)es5
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, './release'), // 根目錄
        open: true, // 根目錄自動打開瀏覽器
        port: 9000
    }
}

npm i babel-loader@7 --save-dev

npm run dev

即可正常轉(zhuǎn)換es6

https://github.com/zyqq/hot-loaded?github.com