Webpack构建React基础工程_vscode创建webpack+react项目-CSDN博客

本文链接：https://blog.csdn.net/H1069495874/article/details/55048316

安装 webpack

在此之前你应该已经安装了 node.js.

npm install webpack -g
参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.

webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上

npm install webpack-dev-server -g
webpack 配置文件

webpack 使用一个名为 webpack.config.js 的配置文件, 现在在你的项目根目录下创建该文件. 我们假设我们的工程有一个入口文件 app.js, 该文件位于 app/ 目录下, 并且希望 webpack 将它打包输出为 build/ 目录下的 bundle.js 文件. webpack.config.js 配置如下:

var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'app/app.js'),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  }
}

现在让我们测试一下, 创建 app/app.js 文件, 填入一下内容:

document.write(‘It works’);
创建 build/index.html, 填入以下内容:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Hacker News Front Page</title>
</head>
<body>
  <script src="./bundle.js"></script>  
</body>
</html>

其中 script 引入了 bundle.js, 这是 webpack 打包后的输出文件.

运行 webpack 打包, 运行 webpack-dev-server 启动服务器. 访问 http://localhost:8080/build/index.html, 如果一切顺利, 你会看到打印出了 It works.

配置 package.json

在项目根目录下运行 npm init -y 会按照默认设置生成 package.json, 修改 scripts 的键值如下:

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}
或者
"scripts": {
  "build": "webpack",
   "dev": "webpack-dev-server  --port 8080  --inline --content-base ./build"
 },

安装依赖

安装 React:

npm install react react-dom –save

引入 jQuery:

npm install jquery –save

全局安装babel-cli
npm install babel-cli -g

安装 Babel 的 loader 以支持 ES6 语法:

npm install babel-loader babel-core babel-preset-es2015 webpack –save-dev

配置 webpack.config.js 来使用安装的 loader.

// webpack.config.js

var path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'app/app.js'),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react']
        }
      }
    ]
    }
};

打开 app.js, 修改内容为:

// app.js

import $ from 'jquery';
import React from 'react';
import { render } from 'react-dom';

class HelloWorld extends React.Component {
  render() {
    return (
        <div>Hello World</div>
        );
  }
}

render(<HelloWorld />, $('#content')[0]);

这里组件 HelloWorld 被装载到 id 为 content 的 DOM 元素, 所以相应的需要修改 index.html .

…

<body>
  <div id="content"></div>
  <script src="./bundle.js"></script>  
</body>

…
再次打包运行, 访问 http://localhost:8080/build/index.html 如果可以看到打印出了 Hello World 那么开发环境就算搭建完成了.