从0开始配置webpack和搭建一个React项目

栏目: 服务器 · 发布时间: 5年前

内容简介：先来说说react搭建：1 官方文档上也有提供直接下载react包，但是修改webpack配置比较麻烦修改webpack配置需要执行

先来说说react搭建：

1 官方文档上也有提供直接下载react包，但是修改webpack配置比较麻烦

npx create-react-app my-app
cd my-app
npm start

修改webpack配置需要执行

npm run eject

2 自行搭建一个项目并且配置webpack--主要记录学习阶段～总结的可能不太好，勉强看看，重点记录一下第二种的方式

通过yarn管理包
  1. 下载yarn

    yarn官网链接 安装步骤都有的

  2. 在项目目录下，执行yarn init

    会出现我们的package.json文件

    从0开始配置webpack和搭建一个React项目

  3. 安装webpack

    yarn add webpack --dev

  4. 新建webpack.config.js文件，

    贴官网示例:

    const path = require('path');
       module.exports = {
         entry: './src/app.js',
         output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'app.js'
         }
       };

    命令行执行webpack会发现dist目录

    从0开始配置webpack和搭建一个React项目

    注意：yarn安装过程中如果出错，尝试将yarn切换到淘宝镜像再进行下载哦～，我安装过程中出现过问题，切到这就没问题了

    yarn config set registry ' https://registry.npm.taobao.org '

  5. 安装html-webpack-plugin

    yarn add html-webpack-plugin --dev

文档使用链接地址

按照文档操作，修改webpack.config.js使用html-webpack-plugin打包html文件

再次执行webpack命令，会发现dist文件夹下面多了一个index.html

设置html-webpack-plugin的template模版,在src新建index.html,并且设置html内容

const path = require('path');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
      entry: './src/app.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
      },
      plugins: [new HtmlWebpackPlugin(
        {
            template:'./src/index.html'
        }
      )]
    };

现在dist文档下面的index.html就是当前src下的index.html的模版了

  1. 安装babel

    yarn add babel-loader @babel/core @babel/preset-env

具体详情见文档地址 在src/app.js中写入一些ES6语法，再次执行webpack命令，dist/app.js进行了转换

  1. 安装react转换 babel-preset-react

    yarn add babel-preset-react --dev

    修改webpack.config.js

    const path = require('path');
   var HtmlWebpackPlugin = require('html-webpack-plugin');
   module.exports = {
     entry: './src/app.jsx'
       path: path.resolve(__dirname, 'dist'),
       filename: 'app.js'
     },
     plugins: [new HtmlWebpackPlugin(
       {
           template:'./src/index.html'
       }
     )],
     module: {
       rules: [
         {
           test: /\.m?jsx$/,
           exclude: /(node_modules|bower_components)/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env','react']
             }
           }
         }
       ]
     }
   };

  2. 安装react

    yarn add react react-dom

    react添加操作地址详情

    将src/app.js修改为app.jsx

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

   ReactDOM.render(
     <h1>Hello, world!</h1>,
     document.getElementById('app')
   );

    再执行webpack进行打包

    如果出现Error: Plugin/Preset files are not allowed to export objects, only functions.错误

说明babel的版本不一致，我这边是因为"babel-preset-react": "^6.24.1"默认装的6版本，其他babel安装的是7版本，所以统一升级到7或者降级到6

yarn add babel-preset-react@7.0.0 --dev

这样在进行打包，就可以了，这个时候打开dist/index.html我们看到hello, world!说成功编译了react

从0开始配置webpack和搭建一个React项目

  1. 安装style-loader

    yarn add css-loader style-loader --dev

    安装地址操作详情

    在webpack.config.js的rules中添加

    {
   test: /\.css$/,
   use: ['style-loader', 'css-loader'],
 },

    在src下新建一个文件index.css，随便修改一点样式

    h1{
       color:#F00;
   }

    在app.jsx中引入

    import './index.css'

    再次执行webpack打包，刷新dist/index.html

    从0开始配置webpack和搭建一个React项目

  2. 安装ExtractTextWebpackPlugin插件将css独立到单独的文件

    yarn add extract-text-webpack-plugin --dev

    官网链接地址 

    const path = require('path');
   var HtmlWebpackPlugin = require('html-webpack-plugin');
   const ExtractTextPlugin = require("extract-text-webpack-plugin");
   module.exports = {
       entry: './src/app.jsx',
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'app.js'
       },
       module: {
           rules: [
           {
               test: /\.m?jsx$/,
               exclude: /(node_modules|bower_components)/,
               use: {
               loader: 'babel-loader',
               options: {
                   presets: ['@babel/preset-env','react']
               }
               }
           },
           {
               test: /\.css$/,
               use: ExtractTextPlugin.extract({
                   fallback: "style-loader",
                   use: "css-loader"
               })
           },
           ]
       },
       plugins: [
           new HtmlWebpackPlugin(
               {
                   template:'./src/index.html'
               }
           ),
           new ExtractTextPlugin("index.css"),
       ],
   };

    webpack.config.js配置如上

    再次执行webpack，dist目录下就多了一个index.css了～

    注意：打包遇到Tapable.plugin is deprecated. Use new API on .hooks instead错误，原因是extract-text-webpack-plugin目前版本不支持webpack4

    执行： yarn add extract-text-webpack-plugin@next --dev

  3. 安装sass-loader

    yarn add sass-loader --dev

    在webpack.config.js中rules添加

    {
       test: /\.scss$/,
       use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: ['css-loader', 'sass-loader']
       })
   }

    新建一个index.scss文件

    body{
       background: #ccc;
       #app{
           font-size: 22px;
       }
   }

    在执行webpack会出现报错Cannot find module 'node-sass'

    查看文档链接

    需要安装node-sass

    yarn add node-sass --dev

    打包，查看index.html可以看到样式应用上去了～

    从0开始配置webpack和搭建一个React项目

  4. 安装url-loader处理图片链接

    yarn add url-loader file-loader --dev

    官网地址

    在rules中加入：

    {
       test: /\.(png|jpg|gif)$/i,
       use: [
         {
           loader: 'url-loader',
           options: {
             limit: 8192
           }
         }
       ]
   }

    项目中引入图片，进行打包，这样图片资源也打包解析进去了～

  5. 添加解析字体rule

    {
       test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
       use: [
           {
             loader: 'url-loader',
             options: {
               limit: 8192,
               name:'resource/[name].[ext]'
             }
           }
       ]
   },

  6. 添加webpack-dev-server

    yarn add webpack-dev-server --dev

    修改package.json添加

    "scripts": {

    "test": "echo "Error: no test specified" && exit 1",

    "watch": "webpack --watch",

    "start": "webpack-dev-server --open",

    "build": "webpack-cli"

    }

    执行yarn run start启动项目

    yarn run build打包项目

    最后附上当前为止修改后的webpack.config.js

    const path = require('path');
       const webpack = require('webpack');
       var HtmlWebpackPlugin = require('html-webpack-plugin');
       const ExtractTextPlugin = require("extract-text-webpack-plugin");
       module.exports = {
           entry: './src/app.jsx',
           output: {
               path: path.resolve(__dirname, 'dist'),
               filename: './js/[name].[hash].js',
               chunkFilename: './js/[name].[hash].js',
           },
           devServer: {
               port: 8080,
               proxy: {
                   '/expo': {
                       target: 'https://xxx',
                       changeOrigin: true,
                       pathRewrite: {
                           '/expo': '/expo',
                       },
                       secure: false,
                   },
               },
               hot:true
           },
           module: {
               rules: [
               {
                   test: /\.m?jsx$/,
                   exclude: /(node_modules|bower_components)/,
                   use: {
                   loader: 'babel-loader',
                   options: {
                       presets: ['@babel/preset-env','react']
                   }
                   }
               },
               {
                   test: /\.css$/,
                   use: ExtractTextPlugin.extract({
                       fallback: "style-loader",
                       use: "css-loader"
                   })
               },
               {
                   test: /\.scss$/,
                   use: ExtractTextPlugin.extract({
                       fallback: 'style-loader',
                       use: ['css-loader', 'sass-loader']
                   })
               },
               {
                   test: /\.(png|jpg|gif|ico|jpeg)$/i,
                   use: [
                     {
                       loader: 'url-loader',
                       options: {
                           limit: 8192,
                           name: "[name].[ext]",
                           publicPath: "../images/",
                           outputPath: "images/"
                       }
                     }
                   ]
               },
               {
                   test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
                   use: [{
                       loader: "file-loader",
                       options: {
                         name: "[name].[ext]",
                         publicPath: "../fonts/",
                         outputPath: "fonts/"
                       }
                   }]
               },
               ]
           },
           plugins: [
               new HtmlWebpackPlugin(
                   {
                       template:'./src/index.html'
                   }
               ),
               new ExtractTextPlugin("css/[name].css"),
           ],
           optimization:{
               splitChunks:{
                   name:'common',
                   filename:'js/base.js'
               }
           }
       };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
UNIX网络编程 卷1：套接字联网API（第3版）

UNIX网络编程 卷1：套接字联网API（第3版）

W.Richard Stevens、Bill Fenner、Andrew M. Rudoff / 杨继张 / 人民邮电出版社 / 2010-6 / 129.00元

这是一部传世之作！顶级网络编程专家Bill Fenner和Andrew M. Rudoff应邀执笔，对W. Richard Stevens的经典作品进行修订。书中吸纳了近几年网络技术的发展，增添了IPv6、SCTP协议和密钥管理套接字等内容，深入讨论了最新的关键标准、实现和技术。 书中的所有示例都是在UNIX系统上测试通过的真实的、可运行的代码，继承了Stevens一直强调的理念：“学习网络......一起来看看 《UNIX网络编程 卷1：套接字联网API（第3版）》 这本书的介绍吧!

码农工具
HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3