webpack2 热加载js 文件

Posted 2020-09-22 Hello World

如果只要普通的热加载 只要如下配置就好了

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"]
}