从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管理包

下载yarn
yarn官网链接安装步骤都有的
在项目目录下，执行yarn init
会出现我们的package.json文件
安装webpack

yarn add webpack --dev
新建webpack.config.js文件，

贴官网示例:
```
const path = require('path');
       module.exports = {
         entry: './src/app.js',
         output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'app.js'
         }
       };
```
命令行执行webpack会发现dist目录

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

yarn config set registry ' https://registry.npm.taobao.org '
安装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的模版了

安装babel

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

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

安装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']
             }
           }
         }
       ]
     }
   };

安装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项目

安装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

安装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

安装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项目

安装url-loader处理图片链接

yarn add url-loader file-loader --dev

官网地址

在rules中加入：

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

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

添加解析字体rule

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

添加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'
               }
           }
       };

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

查看所有标签

猜你喜欢:

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

码农书籍

HTTP Essentials

Stephen A. Thomas、Stephen Thomas / Wiley / 2001-03-08 / USD 34.99

The first complete reference guide to the essential Web protocol As applications and services converge and Web technologies not only assume HTTP but require developers to manipulate it, it is be......一起来看看《HTTP Essentials》这本书的介绍吧!

码农工具

Markdown 在线编辑器

HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具

HEX HSV 互换工具