用npm+webpack构建React

项目结构

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="index"></div>
    <!-- 测试打包后的注释是否还在 -->
    <script src="index.bundle.js" ></script>
</html>

========================================================================================
demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="demo1"></div>
    <script src="demo1.bundle.js"></script>
</body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    <h1>Hello React</h1>,
    document.getElementById("index")
)


=====================================================================================
demo1.jsx

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    <h1>Hello React</h1>,
    document.getElementById("demo1")
)

webpack.config.js配置

var webpack = require('webpack');
var path = require('path');
//用于打包html文件 webpack本身无法打包html
var htmlWebpackPlugin = require('html-webpack-plugin');
//用于在构建前清除dist目录中的内容
const CleanWebpackPlugin = require('clean-webpack-plugin');

//打包html
function bundleHtml(x, y) {
  return new htmlWebpackPlugin({
    //指定要打包的html的文件 路径的默认前缀是context属性值 即__dirname + '/src' + x
    template: x,
    //指定输出路径和文件名 路径的默认前缀是output.path属性值 即__dirname + '/dist/' + y
    filename: y,
    //不在打包后的html中引入js
    inject: false,
    minify: {
      removeComments: true, //去掉注释
      // collapseWhitespace: true, //去掉空行
    }
  })
}
module.exports = {
  context: __dirname + '/src', //这里表示入口，__dirname表示当前目录
  entry: {
    demo1: "./demo1/demo1.jsx",
    react_ajax: "./react_ajax/react_ajax.jsx"
  }, //这里是入口文件
  mode: 'development', //这里表示开发模式，开发模式下webpack打包之后代码不压缩 默认为production
  devtool: 'source-map',// 控制台中可以查看源码 详情查看 https://mp.youkuaiyun.com/postedit/84205227
  module: {
    rules: [ //在webpack3+以上的版本使用rules
      {
        test: /(\.jsx|\.js)$/,
        exclude: /(node-modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: { //这里是出口
    path: __dirname + '/dist/', //出口文件夹 
    filename: '[name]/[name].bundle.js', //出口打包后的文件名
    publicPath: '/'
  },

  plugins: [
    //清除dist构建目录文件
    new CleanWebpackPlugin(['dist']),
    bundleHtml("./demo1/demo1.html", "demo1/demo1.html"),
    bundleHtml("./react_ajax/react_ajax.html", "react_ajax/react_ajax.html"),
  ],
  devServer: {
    contentBase: './dist',//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转.
    inline: true
  }
}

package.json配置

点击链接查看webpack与webpack-dev-server的区别

{
  "name": "react_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch",
    "server": "webpack-dev-server --inline --hot --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "clean-webpack-plugin": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}