从零创立webpack4+react我的项目

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

mkdir webpck-react-democd 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 configcd 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 srccat > app.jsCrtl + 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

持续性更新