webpack自动刷新

最新推荐文章于 2025-04-10 16:07:48 发布

weixin_33901641

最新推荐文章于 2025-04-10 16:07:48 发布

阅读量243

点赞数

文章标签： webpack javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000004408891

版权

webpack.config.js

var path = require('path');

module.exports = {
  entry: {
    index:'./js/components/index'
  },
  externals: [{
    'react-dom':'ReactDOM',
    'react':'React'
  }],
  output: {
    path:path.resolve(__dirname,'js/components'),
    filename: 'bundle.js'
  },
  module: {
    loaders:[
    {
      test: /\.js[x]?$/,
      include: path.resolve(__dirname, 'js/components'),
      loader: 'babel',
      query: {
        presets: ['es2015','react']
      }
    },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias:[
    {'react-dom':'./libs/react-dom.js','react':'./libs/react.js'}
    ]
  }
};

1.html

<!DOCTYPE html>
<html>
...
<body>
    <script type="text/javascript" src='/libs/react.js'></script>
    <script type="text/javascript" src='/libs/react-dom.js'></script>
    <script type="text/javascript" src='/js/components/bundle.js'></script>
</body>
</html>

不修改配置文件(推荐)

Iframe mode

运行webpack-dev-server
浏览器打开http://localhost:8080/webpack-dev-server/1.html

Inline mode

在1.html中添加
<script src="http://localhost:8080/webpack-dev-server.js"></script>
运行webpack-dev-server
浏览器打开http://localhost:8080/1.html

修改配置文件

webpack.config.js

...
module.exports = {
  entry: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8080','./js/components/index'],
  ...
  plugins: [
  new webpack.HotModuleReplacementPlugin()
  ]
};

运行webpack-dev-server,不用添加官网上说的--inline --hot参数
浏览器打开http://localhost:8080/1.html

这种方式的缺点:

会生成多余的js,json文件，并且只能手动删除
配置文件中的entry只能为数组，不能用于多个入口的情况

    ...
    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
    ...

上面所有方式都需要先运行webpack -w监听文件变化

代码

参考
官网文档