码迷,mamicode.com
首页 > Web开发 > 详细

webpack2 热加载js 文件

时间:2017-06-10 10:36:57      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:out   code   pat   exports   script   pack   pac   name   scripts   

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

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

 

webpack2 热加载js 文件

标签:out   code   pat   exports   script   pack   pac   name   scripts   

原文地址:http://www.cnblogs.com/zhengming2016/p/6977165.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!