webpack2 熱加載js 文件

若是隻要普通的熱加載 只要以下配置就行了

package.json

{
  "devDependencies": {
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "start": "webpack-dev-server"
  }
}

 

webpack.config.js

module.exports = {
    entry: __dirname + '/js/test.js',
    output: {
        // 注意這裏是 publicPath
        publicPath: "/dist/",
        filename: "bundle_test.js"
    }
}

 

若要使用 es6 的語法, 需加載babel 文件, 注意要先安裝 babel-cli

package.json 以下:

{
  "devDependencies": {
      "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "start": "webpack-dev-server"
  }
}

 

webpack.config.js 以下:

module.exports = {
    entry: __dirname + '/js/test.js',
    output: {
        publicPath: "/dist/",
        filename: "bundle_test.js"
    },
    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: "json-loader"
            },
            {
                test: /\.js$/,
                loader: "babel-loader"
            }
        ]
    }
}

而且還要加一個 .babelrc 文件, 以下:

{
    "presets": ["es2015", "react"]
}