手动搭建 webpack + react 框架

  • Z时代
  • 2024-01-10
  • 分类：综合

react

手动搭建 webpack + react 框架

准备

创建空项目文件夹。

建议安装cnpm，下文所有npm可以用cnpm代替
npm install -g cnpm --registry=https://registry.npm.taobao.org

初始化 npm 环境

npm init 一路回车即可

依赖安装

  npm i webpack  -D
  npm i webpack-cli -D  (因为webpak 到 4版本以上 就需要这个 ，不然会报错)

创建目录及配置文件

创建 src文件夹，src下创建webpack打包入口文件 index.js

创建webpack.config.js 并编写配置文件。

	const path = require('path') // 引入‘path’，为了在这里使用绝对路径，避免相对路径在不同系统时出现不必要的问题
	var webpack = require('webpack')
	module.exports = {
	  // 应用入口
	  entry: {
	    app: path.join(__dirname, './src/index.js') // index.js作为打包的入口
	  },
	  // 输出目录
	  output: {
	    filename: 'build.js',
	    // filename: '[name].[hash:8].js', //name代表entry对应的名字; hash代表 整个app打包完成后根据内容加上hash。一旦整个文件内容变更，hash就会变化
	    path: path.join(__dirname, 'dist'), // 打包好之后的输出路径
	  },
	}

修改package.json 下

在script中添加如下代码:

"build": "webpack --mode production"

执行 npm run build

就可以把src下面的index.js文件打包出来了，在dist文件夹可以看到打包文件

build.js最后可以看到写的内容

需要引入 babel-loader 来编译 es6

npm i babel-core babel-loader babel-preset-env -D   
npm install babel babel-cli  -D      
npm install babel-preset-react  babel-preset-es2015 -D

然后配置loader

const path = require('path') // 引入‘path’，为了在这里使用绝对路径，避免相对路径在不同系统时出现不必要的问题
var webpack = require('webpack')
module.exports = {
  // 应用入口
  entry: {
    app: path.join(__dirname, './src/index.js') // index.js作为打包的入口
  },
  // 输出目录
  output: {
    filename: 'build.js',
    // filename: '[name].[hash:8].js', //name代表entry对应的名字; hash代表 整个app打包完成后根据内容加上hash。一旦整个文件内容变更，hash就会变化
    path: path.join(__dirname, 'dist'), // 打包好之后的输出路径
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/, //使用loader的目标文件。这里是.js
      use: {
        loader: 'babel-loader',
        options: {
          presets: ["env", "react"] //['@babel/preset-react']
        },
      },
      exclude: [
        path.join(__dirname, '../node_modules') // 由于node_modules都是编译过的文件，这里我们不让babel去处理其下面的js文件
      ]
    }]
  }
}

在项目根目录下创建 babel 的配置文件： .babelrc （前面有个点）

{
  "presets": [
    ["es2015", {"loose": true}],
    "react"
  ]
}

此时再执行 npm run build可能报错，

原因是"babel-loader": "^8.x.x"版本的问题，与babel-core 6.x.x不兼容，把loader降到7.1.5版本即可解决: npm i -D [email protected]

使用html模板

使用 html-webpack-plugin 插件，webpack 可以根据你的配置生成你想要的文件 html
npm i html-webpack-plugin -D

修改配置文件，添加plugins：

const HTMLPlugin = require('html-webpack-plugin')
······
······
plugins: [
    new HTMLPlugin({
      filename: 'distTemp.html', //制定的文件，默认
      template: 'template.html' //制定html生成使用的模板文件 
    }) // 生成一个html页面，同时在webpack编译的时候。把我们所生成的entry都注入到这个html页面中,路径都是根据我们output配置的来走的。
  ]

创建html模板

再执行 npm run build

dist文件夹下就会多一个html文件

开发模式下启动服务器并实时刷新

npm i webpack-dev-server -D

在package.json中script中添加
"dev": "webpack-dev-server --mode development --open",

修改配置文件:

devServer.index一定要和HTMLPlugin.filename一致，否则报错

执行 npm run dev 就会自动打开浏览器了，页面就是模板页面

安装 react 模块
npm i react -D
npm i react-dom -D

修改入口文件，编写react代码，

import React from 'react'
import ReactDom from 'react-dom'
// var React = require('react')
// var ReactDom = require('react-dom')
// 推荐使用import方式(es6标准)，不推荐使用require方式（CommonJS/AMD规范）
let names = ['aa', 'bb']
class Dome extends  React.Component{
  render() {
    return (
      <div>
        {
          names.map(function(name) {
            return <div key={name}> Hello { name } </div>
          })
        }
      </div>
    )
  }
}
export default Dome
ReactDom.render(<Dome />, document.getElementById('root'))

保存，运行npm run dev

最后推荐并致谢以下内容

webpack中文文档： https://www.webpackjs.com/concepts/

英文文档（推荐）： https://webpack.js.org/concepts/

几本关于webpack的书：

1、 https://zhaoda.net/webpack-handbook/index.html

2、 http://webpack.wuhaolin.cn/

3、 https://fakefish.github.io/react-webpack-cookbook/Getting-started.html

第二本有弹出购买的遮罩层时，F12，干掉就行了

以上是 手动搭建 webpack + react 框架 的全部内容， 来源链接： utcz.com/z/381401.html

回到顶部