react+webpack+es6项目框架搭建

最新推荐文章于 2024-04-10 09:33:12 发布

暮色岚光

最新推荐文章于 2024-04-10 09:33:12 发布

阅读量320

点赞数 1

分类专栏： web前端开发工具及环境 React

本文链接：https://blog.csdn.net/ganle/article/details/106381179

版权

web前端开发工具及环境同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

React

2 篇文章 0 订阅

订阅专栏

一、创建项目

二、npm初始化

在新项目下npm init，产生一个package.json

三、全局安装配置webpack和webpack-cli

（1）安装

第一次运行npm install XXX 会生成一个node_modules的文件夹；

安装webpack-cli 会生成package-lock.json文件；

（2）添加webpack配置文件和入口文件等，并编写最简单的webpack配置文件；

/** * Created by a on 2020/5/28. */

const path = require('path');
const webpack = require('webpack');
const proPath = require('./package.json').name;

module.exports = {
    mode: 'development',
    entry: { //入口文件
        index: './src/index.js' },
    output: { //出口文件
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: { //Loader集
        rules: [ ]
    },
    plugins: [ //插件集

    ]
};

四、安装react、react-dom、react-redux、react-router

五、安装Less

以上都是：

npm instal XXX XXX XXX --save-dev

【插入一段】

在package.json中添加npm scripts来动态监听文件的改变并实时打包；

六、初始项目目录设计

package.json缺点：

　　原来 package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，你每次npm install都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以package-lock.json文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本。

七、安装mock

npm install mock --save-dev

八、安装配置babel

【参考】 https://blog.csdn.net/zy444263/article/details/86513190

（1）安装babel、babel-loader、babel-core、babel-preset-env

babel-loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解JavaScript）。babel-loader可以实现对使用了ES2015+语法的.js文件进行处理，然后你就可以利用 webpack的打包能力，对它们进行处理。

babel-core 的作用在于提供一系列api。这便是说，当webpack使用babel-loader处理文件时，babel-loader实际上调用了babel-core的api，因此也必须安装babel-core

babel-preset-env 的作用是告诉babel使用哪种转码规则进行文件处理。

事实上，babel有几种规则都可以实现对ES6语法的转码，如babel-preset-es2015、babel-preset-latest、babel-preset-env，不过官方现已建议采用babel-preset-env，你可以通过官网了解几种规则的区别。

（2）项目配置babel

① 法一：package.json文件中新增 "babel" 属性；

"babel":{
  "presets": [],    //设置babel转码规则
  "plugins": []     //设置babel使用到的插件
}

在本项目中只需将”babel”属性的”presets”:设置为[“env”]即可；

②法二：新增 .babelrc 文件；

只需输入第一种方式中”babel”属性的值即可：

// .babelrc 文件

{
  "presets": ["env"]
}

（3）配置webpack.config.js文件

module.exports={
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/, 
                loader: "babel-loader"
            }
        ]
    }
}

这样就告诉了webpack在打包时，一旦匹配到.js文件就使用babel-loader进行处理，

通过babel-loader调用babel-core的api使用bable-preset-env的规则进行转码。

（4）测试babel对ES6的转换效果

在package.json中“scripts”属性写入：

{
    "build":"webpack"
}

【参考】Webpack 命令行参数详解：https://blog.csdn.net/victoryzn/article/details/81872718

在入口文件index.js中写入简单的ES6代码，

运行 npm run build 获取了dist文件：

用live server打开页面

页面中成功执行de bundle.js代码与预期符合，babel转换ES6成功。

（5）转换React并实现“hello world”

安装babel-preset-react;

配置webpack.config.json：（修改红框）

配置.babelrc：

编辑入口文件index.js：

/**
 * Created by a on 2020/5/28.
 */

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

class IndexComponent extends React.Component{
    render(){
        return <h1>hello world!!!</h1>
    }
}
let oBox = document.getElementById("box");
ReactDOM.render(<IndexComponent/>,oBox)

编辑index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="../public/favicon.ico" />    //设置网站favicon.ico图标
</head>
<body>
    <div id="box"></div>       //react "根" DOM 节点
    <script src="./dist/bundle.js"></script>
    <script>
     //js code
    </script>
</body>
</html>

执行npm run build 报错：

Stack Overflow中有人建议删掉packjson-lock.json文件，重新npm install；

我先进入node_modules文件中找react、react-dom等文件都没找到，于是根据上诉建议操作，删掉 package-lock.json 和node_modules 文件 npm install 重新安装插件；

再执行npm run build 页面成功展示“hello world!!!”：

九、使用webpack-dev-server

见我的博客：https://blog.csdn.net/ganle/article/details/106455612

十、使用sourceMap

映射源代码和打包后代码的关系

实现方法：自身有sourceMap的文件则在末尾添加注释

webpack中配置：

打包后发现：dist中出现了map文件

且bundle.js末尾有注释map文件的地址：

除了source-map这一属性值外还有很多别的属性值，效果不同，执行速度不同，参考官网：https://www.webpackjs.com/configuration/devtool/#devtool

适合生成环境的选项除了source-map还有：hidden-source-map（适用于编写npm包）、nonsources-source-map

● 开发环境下sourceMap的选择：

● 生产环境下sourceMap 选择 none，它不会生成 Source Map：

提醒：

暮色岚光

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react+webpack+es6项目框架搭建

一、创建项目二、npm初始化在新项目下npm init，产生一个package.json三、全局安装webpack和webpack-cli第一次运行npm install XXX 会生成一个node_modules的文件夹；安装webpack-cli 会生成package-lock.json文件；四、添加webpack配置文件和入口文件等并编写最简单的webpack配置文件；//webpack.config.jsconst ...
复制链接

扫一扫

专栏目录