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

从零创立webpack4+react我的项目

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

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


持续性更新


【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

阿里云限时活动-2核2G-5M带宽-40-100G SSD服务器,特惠价86元/年(原价724元/年,限时99元续购三次),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据