关于react.js:从零创建webpack4react项目

1次阅读

共计 2798 个字符，预计需要花费 7 分钟才能阅读完成。

创立我的项目文件夹，并进入文件夹

mkdir webpck-react-demo
cd webpck-react-demo

初始化我的项目，生成 package.json

npm init -y

装置 webpack 及其脚手架

–save-dev 开发时的依赖 –save 运行时的依赖
node 5 以上版本在执行 npm install 命令时会主动生成 package-lock.json 文件
package.json 与 package-lock.json 的区别👈

npm install --save-dev webpack webpack-cli

创立并进入 config 文件夹

mkdir config
cd config

创立 webpack.common.config.js 文件

cat > webpack.base.config.js // 创立文件
Crtl+D // 退出并保留

const path = require('path');

module.exports = {
  entry: {  // 入口文件
    app: './src/app.js',
  },
  output: {  // 编译打包后的文件名及所在门路
    filename: 'js/budle.js',  // 打包输入的文件名字
    path: path.resolve(__dirname, '../dist')  // 输入门路
  }
}

在 webpck-react-demo 我的项目文件夹下创立 src 文件夹，并在 src 中创立 app.js 文件

创立文件能够应用命令，也能够间接手动创立~

cd ../
mkdir src 
cd src
cat > app.js
Crtl + D

package.json 文件减少运行命令

新增 start 命令

"scripts": {
    "test": "echo \"Error: no test specified\"&& exit 1",
    "start": "webpack --config ./config/webpack.base.config.js"
},

此时的我的项目构造

当初曾经能够运行 yarn start 来尝试打包文件了，执行命令后将会生成一个 dist 文件夹，外面蕴含了 js/budle.js 文件, 打包的是 app.js 文件

装置 webpack-merge 依赖

webpack-merge 治理配置，能够基于一个 base 文件管控不同环境下的配置

yarn add webpack-merge

在 config 文件夹下创立 webpack.dev.config.js 和 webpack.prod.config.js 文件，并在 prod 文件内写入以下代码

// ⚠️ 留神 merge 的引入形式
const {merge} = require('webpack-merge');
const common = require('./webpack.base.config.js');

module.exports = merge(common, {mode: 'production',});

在根目录下创立 public 文件夹，并在 public 内创立 index.html 文件，写入以下内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 从零创立 webpack4+react 我的项目 </title>
</head>
<body>
  <div id="root"></div>
  <script src="../dist/js/budle.js"></script>
</body>
</html>

在 app.js 写入以下代码

var root =document.getElementById('root');
root.innerHTML = 'hello, webpack!';

在 package.json 文件内减少命令

新增 build 命令

  "scripts": {
    "test": "echo \"Error: no test specified\"&& exit 1",
    "start": "webpack --config ./config/webpack.base.config.js",
    "build": "webpack --config ./config/webpack.prod.config.js"
  },

此时我的项目目录为

当初能够尝试运行 yarn build 命令了，能够查看一下 dist/js/bundle.js 文件，也能够间接点开 index.html 文件在浏览器端查看~

⚠️ 打包后才会呈现 dist 文件夹

装置 React

yarn add react react-dom

src 目录下创立 index.js，并写入如下内容

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

更改 app.js 文件

应用 jsx 语法

import React from 'react';

const App = () => {
  return (<div className="App">Hellow World</div>);
}

export default App;

装置 babel 相干模块

该模块用来编译转码，webpack 无奈辨认 jsx 语法

yarn add babel-loader @babel/preset-react @babel/preset-env @babel/core

在根目录下创立.babelrc 文件，配置 babel，并写入以下代码

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          // 大于相干浏览器版本无需用到 preset-env
          "edge": 17,
          "firefox": 60,
          "chrome": 67,
          "safari": 11.1
        },
        // 依据代码逻辑中用到的 ES6+ 语法进行办法的导入，而不是全副导入
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ]
}

配置 webpack.base.config.js 文件

入口文件更改为 index.js
增加 moudle 模块 – 解决 babel

  entry: {  // 入口文件
    app: './src/index.js',
  },

  module: {
    rules: [
      {test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      }
    ]
  }

此时的我的项目目录为

当初能够尝试执行一下yarn build，也能够在浏览器中运行一下 index.html

持续性更新

正文完