前端--React之webpack使用教程

最新推荐文章于 2023-08-07 13:57:40 发布

_朱志强

最新推荐文章于 2023-08-07 13:57:40 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/zhuzhiqiang_zhu/article/details/53505892

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

记住：一定要一步一步的跟着执行，不要漏过任何一部

项目的文件架构为：
这里写图片描述

最近在学习react,记录一下在学习webpack过程中的经历，希望帮助新人少走弯路。
1、新建一个测试目录，这里叫做ReactWebpackTest
2、在ReactWebpackTest下面新建src、dest文件夹，webpack.config.js(这个文件的名字是固定的不能乱改)
3、PS:这一步的前提是必须先安装npm
在ReactWebpackTest目录下，依次执行命令

//我这里使用的是cnpm,npm太慢了，由npm变为cnpm只需要执行
//npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm intsall webpack --save
cnpm install babel-core
cnpm install babel-loader
cnpm install babel-preset-es2015//解析es6的
cnpm install babel-preset-react//解析jsx语法
cnpm install react
cnpm install react-dom

webpack.config.js的内容（可以直接粘贴到你的js文件中）

module.exports = {
    entry: './entry.js',//入口
    output: {//输出
        path: __dirname,
        filename: "./dest/bundle.js"
    },
    module: {
        loaders: [{
            test: /\.js?$/,//表示要变异的文件的类型，这里要编译的是js文件
            loader: 'babel-loader',//装载的哪些模块
            exclude: /node_modules/,//标示不变异node_modules文件夹下面的内容
            query: {//具体的编译的类型，
                compact: false,//表示不压缩
                presets: ['es2015', 'react']//我们需要编译的是es6和react
            }
        }]
    }
}

4、在src文件夹下面建立index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个React的栗子</title>
</head>
<body>

<div id="app"></div>

</body>
</html>
<script type="text/javascript" src="../dest/bundle.js"></script>

在根目录建立test.js

'use strict'

//引入相关的包
import React,{Component} from 'react';
import ReactDom from 'react-dom';

//es6语法
class HelloWorld extends Component{
    render(){
        return(
            <h1>Hello,World</h1>
        )
    }
}

ReactDom.render(
    <HelloWorld/>,
    document.getElementById('app')
)

在根目录建立entry.js

'use strict'

require('./src/test')

最后一步：在根目录下面执行：webpack，当你看到在控制台打印出下面的内容都成功了

Hash: 3f011e7ae11a543cea40
Version: webpack 1.13.3
Time: 1707ms
           Asset    Size  Chunks             Chunk Names
./dest/bundle.js  912 kB       0  [emitted]  main
    + 238 hidden modules

_朱志强

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端--React之webpack使用教程

记住：一定要一步一步的跟着执行，不要漏过任何一部项目的文件架构为：最近在学习react,记录一下在学习webpack过程中的经历，希望帮助新人少走弯路。 1、新建一个测试目录，这里叫做ReactWebpackTest 2、在ReactWebpackTest下面新建src、dest文件夹，webpack.config.js(这个文件的名字是固定的不能乱改) 3、PS:这一步的前提是必须先安装
复制链接

扫一扫