React

最新推荐文章于 2022-04-30 08:00:00 发布

少女彤

最新推荐文章于 2022-04-30 08:00:00 发布

阅读量147

点赞数 1

分类专栏：前端 react webpack 文章标签： webpack.react

本文链接：https://blog.csdn.net/weixin_43244655/article/details/82807538

版权

前端同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

react

7 篇文章 0 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

1. webpack，React

是打包所有的资源。模块打包机

安装webpack
cnpm install webpack webpack-cli -S
检测安装版本
webpack -v
** 新建文件夹aa(文件夹名自定义)**
打开命令符，在终端输入 cnpm init (一路回车) / cnpm init -y(不回车),
文件夹会多出一个package.json 文件，package.json是对项目的说明。
创建src文件,在src 文件在创建一个组建文件夹components,在components文件夹里创建nav.js
在nav.js中写入内容

//导出一个函数
export default function nav(){
    console.log('123456789')
}

在src文件夹里创建一个app.js文件，并在文件中导入nav.js：（app.js是一个入口文件）

import Nav from './components/nav'
Nav()

在webpack.config.js中写入

const path =require('path')  //把path引进来

module.exports={
    entry:'./src/app.js',     //入口文件
    output:{   //出口文件
        filename:'main.js', //输出之后，打包之后有一个文件夹来接收
        path:path.resolve(__dirname, 'dist/')  //输出之后文件路径
        //dirname 是当前文件路径所在的目录   ‘dist/是main.js所在的目录里
    }
}

在终端输入webpack, 这样在aa文件夹里会自动生成dist文件夹，dist的文件夹里面有main.js文件
在src文件夹里创建一个index.html文件，引入main.js
打开网页，就能看到console.log()里的内容

2. 安装react

安装： cnpm install react react-dom -S
在app.js中写入：

import React,{ Component } from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <div>Hello</div>,
    document.getElementById('root')
)

在index.html中写入

<body>
<div id="root">

</div>
<script src="../dist/main.js"></script>
</body>

安装Es6：cnpm install babel-core babel-loader babel-preset-react --save-dev
安装babel-loader： cnpm install babel-loader@7 -S

在webpack.config中写入

 module:{
        rules:[
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['react']
                        }
                    }
                ]
            }
        ]
    }

安装完成

安装webpack服务器（热加载）

这样每次写完代码，不用在终端输入webpack进行打包，手动刷新页面

在终端输入
cnpm install webpack-dev-server html-webpack-plugin -S
在webpack.config.js中配置内容

const  HtmlWebpackPlugin = require('html-webpack-plugin');

 plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],

在package.json里面写入

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server"   
  },

在终端输入 cnpm run server ，便可以出现 localhost:8080

少女彤

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React

1. webpack，React是打包所有的资源。模块打包机安装webpack cnpm install webpack webpack-cli -S检测安装版本 webpack -v** 新建文件夹aa(文件夹名自定义)** 打开命令符，在终端输入 cnpm init (一路回车) / cnpm init -y(不回车),文件夹...
复制链接

扫一扫

专栏目录