137、React.js之编译打包的配置

最新推荐文章于 2024-07-08 14:01:49 发布

香港胖仔

最新推荐文章于 2024-07-08 14:01:49 发布

阅读量1.9k

点赞数

分类专栏：前端React 文章标签： reactjs javascript

本文链接：https://blog.csdn.net/u012416045/article/details/107136825

版权

前端React 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、React.js项目的打包和使用

创建一个index.html文件，并且在这个文件中引入main.js的javascript程序文件，我们要做的就是编译生成main.js的javascript文件。

<!DOCTYPE html>

<html lang="en">
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!-- <script src="../dist/main.js"></script> -->
        <script src="/main.js"></script>
    </head>
    <body>
        <!--创建一个容器，将来 渲染的虚拟DOM,会放到容器内显示-->
        <div id="app"></div>
    </body>



</html>

二、在webpack.config.js文件中设置一个html插件的实例对象，

并制定的打包入口文件为index.html

在创建打包的配置对象的时候，传入这个html插件的实例对象

下面是webpack.config.js文件中的配置

(1) 创建html插件的实例对象，并指定webpack的打包入口文件，约定大于配置，默认入口文件是index.js

(2) 创建webpack打包的配置信息，传入上一步创建好的html插件对象

(3) 设置webpack打包的时候是否需要进行压缩

(4) 设置webpack打包时的调试模式source-map

(5) 设置第三方模块的配置规则，设置jsx文件的编译包为babel-loader

设置scss文件的编译包为style-loader，并且开启css模块化

设置css文件的编译包为style-loader

(6)编译完后的文件会默认存放到./dist/main.js文件中

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')


//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),//源文件
    filename: 'index.html'
})


//向外暴露一个打包的配置对象
module.exports = {
    devtool: 'source-map',
    mode: 'development', //development,production  production模式会进行压缩
    plugins: [
        htmlPlugin
    ],

    //在webpack 4.x中，有一个很大的特性，就是约定大于配置，约定，默认的打包入口路径是src->index.js
    module: {
        //所有第三方模块的配置规则
        rules: [  //第三方匹配规则
            { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ },   //千万别忘记添加exclude 排除项
            { test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:base64:5]', 'sass-loader'], exclude: /node_modules/ },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] } //表示要为CSS样式启用模块化
        ]
    },
    performance: {

        hints: false
    }
}

//行不行
//export default {}

三、index.js文件中，设置React项目的主组件为App.jsx

import React from 'react'
import ReactDOM from 'react-dom'

// 导入计数器组件
import Counter from './components/Counter.jsx'

import Parent from './components/TestReceiveProps.jsx'
import CmtList from './components/Comment/CmtList.jsx'

//导入计数器组件
import BindThis from './components/BindThis.jsx'
import Com1 from './components/Context.jsx'

import App from './App.jsx'

//由于直接使用Ant Design 的全部包，体积过大，所有，建议大家使用按需导入，这样能减少bundle.js文件的体积
// import 'antd/dist/antd.css'




//使用render函数渲染 虚拟DOM
ReactDOM.render(<App></App>, document.getElementById('app'))

四、项目的依赖包管理文件package.json

并且在这里设置，编译打包的命令。在scripts中进行设置

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --progress --host 127.0.0.1",
    "devtools": "react-devtools"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
    "@babel/plugin-transform-runtime": "^7.10.1",
    "babel-loader": "^8.1.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "@babel/runtime": "^7.10.2",
    "antd": "^4.3.5",
    "babel-plugin-import": "^1.13.0",
    "babel-preset-mobx": "^2.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

五、在项目的根目录，运行npm run dev

即可开始打包编译，运行react项目