devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基础搭建 Webpack4+React (jsx + less)

作者：从前慢现在也慢 | 2024-02-09 13:38:50

赞

踩

react jsx less

React项目的初始化、webpack的安装、如何使用jsx和less。

一、初始 React 项目

　　react项目的初始化比较简单，我用的就是react的脚手架。三种方式：

　　1、NPM

npm init react-app my-app

　　2、NPX

npx create-react-app my-app

　　3、Yarn

yarn create react-app my-app

 

　　my-app 是项目的名字，运行命令时会在当前目录下自动创建一个名字叫作 my-app 的项目文件夹。命令运行完毕，简单的React项目就初始化完成了。项目的初始的代码结构式这个样子的：

　　进入项目文件，你可以通过 npm run start 来运行项目，会跳出一个React的欢迎页

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

 

二、Webpack安装程序

　　Webpack

　　　　WebPack可以看做是模块打包机：它会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less、jsx、Scss、TypeScript等），并将其打包为合适的格式以供浏览器使用。

　　为什么要用 WebPack ？

　　　　1、模块化

　　　　　　在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。

　　　　2、预处理（Less，Sass，ES6，TypeScript……）

　　　　3、主流框架脚手架支持（Vue，React，Angular）

　　　　4、庞大的社区（资源丰富，降低学习成本）

　　

　　1、开始安装Webpack

　　　　使用 webpack 首先你需要安装 webpack-dev-server 在本地环境中为捆绑的应用程序提供服务、webpack-cli 在配置文件中来配置你的Webpack 设置。

npm install --save-dev webpack webpack-dev-server webpack-cli

　　

　　2、修改 package.json

 　　　　主要修改 package.json 中的启动项

　　　　　　　

"scripts": {
  "start": "webpack-dev-server --config config/webpack.base.config.js --mode development",
  ...
}

　　　　　   

　　　　脚本将 webpack-dev-server 与名为 webpack.base.config.js 一起使用。我在项目的根目录下创建了一个 config 文件夹，里面用来存放 webpack 的配置文件。The --mode development flag just adds default Webpack configurations which came with Webpack 4.

　　　　　　

　　

　　3、编辑 webpack.base.config.js

  1. module.exports = {
  2.     entry: './src/index.js',
  3.     output: {
  4.       path: __dirname + '/public',
  5.       publicPath: '/',
  6.       filename: 'bundle.js'
  7.     },
  8.     devServer: {
  9.       contentBase: './public'
  10.     }
  11. };

　　　　文件说明：

　　　　　　(1) 我们希望使用 “./src/index.js” 文件作为入口点。

　　　　　　(2) 绑定的文件最后生成的js文件，叫做: bundle.js .

　　　 　　（3）生成的位置在：“/public”

　　

　　4、修改一下public/index.html 和 src/index.js 中的内容

　　　　因为我们初步使用 webpack 来启动我们的项目，所以像是 svg图片、react的识别都还没有配置。所以先将这两个文件进行修改，这些修改不会影响到之后咱们的搭建。将两个文件修改成下面的样子。

　　　　public/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <title>React App</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <base href="/">
  7.   </head>
  8.   <body>
  9.     <noscript>You need to enable JavaScript to run this app.</noscript>
  10.     <div id="root"></div>
  11.     <script src="./bundle.js"></script>
  12.   </body>
  13. </html>

　　　　src/index.js

console.log('My Minimal React Webpack Babel Setup');

　　5、npm start

　　　　OK，我们已经使用 webpack 将项目的启动脚本配置好了。下面就是使用 npm start 来验证我们的启动命令是否成功。　　　

　　　　

　　　　项目启动成功，接下来访问地址 localhost:8080 来访问一下。

　　　　

　　　　其中我们在 src/index.js 里面 console.log 的信息已经显示在了浏览器里边，说明 index.js 已经通过 webpack 编译成了 bundle.js。

 

三、配置 babel

　　babel 是一个广泛的转码器，可以将 ES6 代码转化为 ES5 代码。从而在现有的环境中执行。

　　1、安装插件

　　　　在项目根目录下指定下面命令，作用是使得 babel 正常执行：

npm install --save-dev @babel/core @babel/preset-env

　　　　 为了将它连接到Webpack，还需要安装一个加载器：

npm install --save-dev babel-loader

　　　　 还需要一个配置，来将 React 的 jsx 语法转化成 JavaScript:

npm install --save-dev @babel/preset-react

　　2、编辑 webpack.base.config.js 文件

　　　　在 webpack.base.config.js 文件中添加代码：

    module: {
      rules: [
          {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              use: ['babel-loader', 'eslint-loader']
          },
          {
              test: /\.(css|less)$/,
              use:["style-loader", "css-loader", "less-loader"]
          },
          {
              test: /\.svg$/,
              use: ['file-loader']
          }
      ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx', '.css', '.less']
    }

 

　　　

　　　　这些代码的作用是 是代码识别 js、jsx、css、less、svg图片文件的。

　　　　这里要下载几个 loader 和 plugin：

npm install --save-dev style-loader css-loader less less-loader eslint-loader file-loader extract-text-webpack-plugin@next

　　　　在项目根目录下创建 .babelrc 文件

　　　　　　.babelrc

  1. {
  2.   "presets": [
  3.     "@babel/preset-env",
  4.     "@babel/preset-react"
  5.   ]
  6. }

　　3、修改 src/index.js 文件

　　　　webpack 已经认less和css文件了。现在我们修改一下index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

　　然后将 App.css 改名为 App.less, 内容不需要改，如下图：

　　

　　OK，现在执行命令 npm start，访问 localhost:8080 看一下结果.

　　

　　成功。

 

四、使用 webpack 打包项目

　　1、首先我在 config 文件夹中创建 path.js、webpack.opt.config.js、 webpack.prod.config.js 三个文件

　　　　path.js

　　　　　　path 的作用是 提供path路径的，自定义的path。

  1. var path = require('path');
  2. var fs = require('fs');
  3.  
  4. // Make sure any symlinks in the project folder are resolved:
  5. // https://github.com/facebookincubator/create-react-app/issues/637
  6. var appDirectory = fs.realpathSync(process.cwd());
  7. function resolveApp(relativePath) {
  8.   return path.resolve(appDirectory, relativePath);
  9. }
  10.  
  11. // We support resolving modules according to `NODE_PATH`.
  12. // This lets you use absolute paths in imports inside large monorepos:
  13. // https://github.com/facebookincubator/create-react-app/issues/253.
  14.  
  15. // It works similar to `NODE_PATH` in Node itself:
  16. // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
  17.  
  18. // We will export `nodePaths` as an array of absolute paths.
  19. // It will then be used by Webpack configs.
  20. // Jest doesn't need this because it already handles `NODE_PATH` out of the box.
  21.  
  22. // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
  23. // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
  24. // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
  25.  
  26. var nodePaths = (process.env.NODE_PATH || '')
  27.   .split(process.platform === 'win32' ? ';' : ':')
  28.   .filter(Boolean)
  29.   .filter(folder => !path.isAbsolute(folder))
  30.   .map(resolveApp);
  31.  
  32. // config after eject: we're in ./config/
  33. module.exports = {
  34.   appBuild: resolveApp('build'),
  35.   appPublic: resolveApp('public'),
  36.   appHtml: resolveApp('public/index.html'),
  37.   appIndexJs: resolveApp('src/index.js'),
  38.   appPackageJson: resolveApp('package.json'),
  39.   appSrc: resolveApp('src'),
  40.   yarnLockFile: resolveApp('yarn.lock'),
  41.   appNodeModules: resolveApp('node_modules'),
  42.   nodePaths: nodePaths
  43. };

　　　　webpack.opt.config.js

　　　　　　webpack.opt.config.js 是在打包时做 css代码 优化的

  1. var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  2. var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  3.  
  4. module.exports = {
  5.   optimization: {
  6.     minimizer: [
  7.       new UglifyJsPlugin({
  8.         uglifyOptions: {
  9.           mangle: {
  10.             keep_fnames: true,
  11.           },
  12.         },
  13.       })
  14.     ],
  15.   },
  16.   plugins: [
  17.     new OptimizeCssAssetsPlugin()
  18.   ],
  19. }

　　　　webpack.prod.config.js

　　　　　　webpack.prod.config.js 用来将各个 config 文件融合到一起

  1. var webpack = require('webpack');
  2. var merge = require('webpack-merge');
  3.  
  4. var baseConfig = require('./webpack.base.config');
  5. var optimizationConfig = require('./webpack.opt.config');
  6.  
  7. const productionConfiguration = function (env) {
  8.   const NODE_ENV = env.NODE_ENV ? env.NODE_ENV : 'development';
  9.   return {
  10.     plugins: [
  11.       new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) }),
  12.     ]
  13.   };
  14. }
  15.  
  16. module.exports = merge.smart(baseConfig, optimizationConfig, productionConfiguration);　　

　　　　安装  uglifyjs-webpack-plugin 和 webpack-merge ：

npm install --save-dev uglifyjs-webpack-plugin

 npm install --save-dev webpack-merge

　　

　　2、在项目根目录下创建 server 文件夹

　　　　server 的作用是，打包成功之后，项目启动一个server。可以通过访问 server 地址来直接访问项目build之后生成的包。

　　　　　　server/index.js

  1. const express = require('express');
  2. const path = require('path');
  3. const http = require('http');
  4.  
  5. const app = express();
  6.  
  7. // Point static path to dist
  8. app.use(express.static(path.join(__dirname, '..', 'build')));
  9.  
  10. const routes = require('./routes')
  11. app.use('/', routes);
  12.  
  13. /** Get port from environment and store in Express. */
  14. const port = process.env.PORT || '3000';
  15. app.set('port', port);
  16.  
  17. /** Create HTTP server. */
  18. const server = http.createServer(app);
  19. /** Listen on provided port, on all network interfaces. */
  20. server.listen(port, () => console.log(`Server Running on port ${port}`))

 

　　　　　　routes/index.js

  1. const path = require('path');
  2. const router = require('express').Router();
  3.  
  4. router
  5.   .get('/*', (req, res, next) => {
  6.     const routePath = path.join(__dirname + '..', '..', '..','build/' + 'index.html');
  7.     res.sendFile(routePath);
  8.   })
  9. module.exports = router;

 

　　　　这里面要安装一个 express：　　

npm install --save-dev express

　

 

　　　　

 

　　3、修改 webpack.base.config.js

　　　　webpack.base.config.js 最终版

  1. const webpack = require('webpack');
  2. var HtmlWebpackPlugin = require('html-webpack-plugin');
  3. var ExtractTextPlugin = require('extract-text-webpack-plugin');
  4. var paths = require('./paths');
  5.  
  6. module.exports = {
  7.     entry: './src/index.js',
  8.     output: {
  9.       path: paths.appBuild,
  10.       publicPath: '/',
  11.       filename: 'bundle.js'
  12.     },
  13.     module: {
  14.         rules: [
  15.             {
  16.                 test: /\.(js|jsx)$/,
  17.                 exclude: /node_modules/,
  18.                 use: ['babel-loader', 'eslint-loader']
  19.             },
  20.             {
  21.                 test: /\.(css|less)$/,
  22.                 use:["style-loader", "css-loader", "less-loader"]
  23.                 // use: ExtractTextPlugin.extract({
  24.                 //   fallback: "style-loader",
  25.                 //   use: "css-loader!less-loader",
  26.                 // })
  27.             },
  28.             {
  29.                 test: /\.svg$/,
  30.                 use: ['file-loader']
  31.             }
  32.         ]
  33.     },
  34.     plugins: [
  35.         new webpack.HotModuleReplacementPlugin(),
  36.         new HtmlWebpackPlugin({ 
  37.             template: './public/index.html', 
  38.             filename: './index.html' 
  39.         }),
  40.         new ExtractTextPlugin('style.css')
  41.     ],
  42.     resolve: {
  43.         extensions: ['*', '.js', '.jsx', '.css', '.less']
  44.     },
  45.     devServer: {
  46.       contentBase: './public',
  47.       hot: true
  48.     }
  49.   };

　　　　标红的部分是两种 css 的 load 方式。

　　　　　　直接使用 " use: [] " : 打包时，css会被打包到 bundle.js 里面。

　　　　　　使用 " use: ExtractTextPlugin.extract() " : 和 plugin 中的 new ExtractTextPlugin('style.css') 联用。打包时会将css文件分离开来进行打包，在 build 文件夹中生成一个 style.css 文件.

　　　　安装 html-webpack-plugin：

npm install --save-dev html-webpack-plugin

　　4、package.json

　　　　将 script 中的 build 换成如下语句：

  1. "prestart:prod": "webpack --mode production --config config/webpack.prod.config.js --env.NODE_ENV=production --progress",
  2.     "start:prod": "node server",

　　　　

 

　　5、测试

　　　　OK，全部配置完毕了，下面我们来测试一下是否成功。

　　　　　　运行命令 npm run start:prod 

　　　　 

　　　　　　build 生成的文件，三个如下：

             

　　　　　　运行成功，访问 localhost:3000 访问 build 好的包。

　　　 　

 　　　　　　

　　　　　　执行命令： npm start

　　　　

　　　　　　

　　　　　　访问 localhost:8080:

　　　　

 

 

 

 

 

　

　

 

 

 

　　　　

 

转载于:https://www.cnblogs.com/Lyh1997/p/10372408.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/72156
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号