• Webpack是什么

Webpack中文文档

Webpack是将模块打包成一个或多个bundle文件的打包器

  • 为什么需要Webpack

阮一峰Webpack教程

结合阮一峰老师的Demo和不使用Webpack的Demo，对比来看为什么需要Webpack

  • 更简洁方便的依赖包管理

Webpack-Demo3:

项目结构：

【9月学习随笔】关于Webpack_xml

 

webpack.config.js:

babel-loader会在编译之前将jsx文件翻译为普通ES5语法的文件

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

 

index.html:

引入打包后的bundle.js，无需再引入react依赖

<script src="bundle.js"></script>

 

Simple-Demo3:

项目结构：

【9月学习随笔】关于Webpack_项目结构_02

 

 

 index.html:

引入react和react-dom依赖，由于chrome不支持使用XHR（XMLHttpRequest）加载file:// 开头的url文件，所以只能将react内容直接写在script标签里，或者将jsx内容放在服务器上

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <h1>Hello Demo</h1>
    <div id="wrapper"></div>
<!--   <script type="text/babel" src='./main.jsx'></script>
    XHR不支持直接引入本地jsx文件--> 
    <script type='text/babel'>
    ReactDOM.render(
    <h2>Content</h2>,
    document.querySelector('#wrapper')
  );
    </script>
</body>
</html>