webpack自动革新

2024年5月2日 76次阅读 来源: TheViper

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监听文件变化

代码

参考
官网文档

    原文作者：TheViper
    原文地址: https://segmentfault.com/a/1190000004408891
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞