React 使用webpack构建React项目

Posted 2023-04-17

参考技术A 配置 React 项目，需要完成的工作：

1、编译 jsx,es6,scss 等资源

2、自动引入静态资源到 html 页面

3、实时编译和刷新浏览器

4、按指定模块化规范自动包装模块

5、自动给 css 添加浏览器内核前缀

6、按需打包合并 js、css

根据 webpack 文档编写最基本的 webpack 配置，直接使用 node api 的方式

/* webpack.config.js */

var webpack= require( 'webpack' );

// 辅助函数  var utils= require( './utils' );

var fullPath=utils.fullPath;

var pickFiles=utils.pickFiles;

// 项目根路径  var ROOT_PATH=fullPath( '../' );

// 项目源码路径  var SRC_PATH=ROOT_PATH+ '/src' ;

// 产出路径  var DIST_PATH=ROOT_PATH+ '/dist' ;

// 是否是开发环境  var __DEV__= process.env. NODE_ENV !== 'production' ;

// conf

var alias=pickFiles(

id :/(conf\/[^\/]+).js$/,

pattern :SRC_PATH+ '/conf/*.js'

);

// components

alias= Object.assign(alias,pickFiles(

id :/(components\/[^\/]+)/,

pattern :SRC_PATH+ '/components/*/index.js'

));

// reducers

alias= Object.assign(alias,pickFiles(

id :/(reducers\/[^\/]+).js/,

pattern :SRC_PATH+ '/js/reducers/*'

));

// actions

alias= Object.assign(alias,pickFiles(

id :/(actions\/[^\/]+).js/,

pattern :SRC_PATH+ '/js/actions/*'

));

var config=

context :SRC_PATH,

entry :

app : [ './pages/app.js' ]

,

output :

path :DIST_PATH,

filename : 'js/bundle.js'

,

module : ,

resolve :

alias :alias

,

plugins : [

new webpack.DefinePlugin(

// http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack

"process.env.NODE_ENV" : JSON .stringify(process.env. NODE_ENV || 'development' )

)

]

;

module.

exports =config;

/* webpack.dev.js */

var webpack= require( 'webpack' );

var WebpackDevServer= require( 'webpack-dev-server' );

var config= require( './webpack.config' );

var utils= require( './utils' );

var PORT=8080;

var HOST=utils.getIP();

var args= process.argv;

var hot=args.indexOf( '--hot' ) > -1;

var deploy=args.indexOf( '--deploy' ) > -1;

// 本地环境静态资源路径  var localPublicPath= 'http://' +HOST+ ':' +PORT+ '/' ;

config.output. publicPath =localPublicPath;

config.entry.app.unshift( 'webpack-dev-server/client?' +localPublicPath);

new WebpackDevServer(webpack(config),

hot :hot,

inline : true ,

compress : true ,

stats :

chunks : false ,

children : false ,

colors : true

,

// Set this as true if you want to access dev server from arbitrary url.

// This is handy if you are using a html5 router.

historyApiFallback : true ,

).listen(

PORT,HOST, function ()

console .log(localPublicPath);

);

编译 jsx、es6、scss 等资源：

● 使用 bael 和 babel-loader 编译 jsx、es6

● 安装插件: babel-preset-es2015 用于解析 es6

● 安装插件：babel-preset-react 用于解析 jsx

// 首先需要安装 babel

$ npm i babel-core

// 安装插件

$ npm i babel-preset-es2015babel-preset-react

// 安装 loader

$ npm i babel-loader

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



"presets" : [ "es2015" , "react" ]



在 webpack.config.js 里添加：

// 使用缓存 var CACHE_PATH = ROOT_PATH + '/cache' ;

// loaders

config.module. loaders = [];

// 使用 babel 编译 jsx 、 es6

config.module. loaders .push(

test :/\.js$/,

exclude :/node_modules/,

include : SRC_PATH,

// 这里使用  loaders ，因为后面还需要添加  loader

loaders : [ 'babel?cacheDirectory=' + CACHE_PATH ]

);

接下来使用 sass-loader 编译 sass:

$ npm i sass-loader node-sasscss-loader style-loader

●css-loader 用于将 css 当做模块一样来 import

●style-loader 用于自动将 css 添加到页面

在 webpack.config.js 里添加：

// 编译  sass

config.module. loaders .push(

test :/\.(scss|css)$/,

loaders : [ 'style' , 'css' , 'sass' ]

);

自动引入静态资源到相应 html 页面

● 使用 html-webpack-plugin

$ npm i html-webpack-plugin

在 webpack.config.js 里添加：

// html  页面  var HtmlwebpackPlugin= require( 'html-webpack-plugin' );

config.

plugins .push(

new HtmlwebpackPlugin(

filename : 'index.html' ,

chunks : [ 'app' ],

template : SRC_PATH + '/pages/app.html'

)

);

打包合并 js、css

webpack 默认将所有模块都打包成一个 bundle，并提供了 Code Splitting 功能便于我们按需拆分。在这个例子里我们把框架和库都拆分出来：

在 webpack.config.js 添加：

config.entry. lib = [

'react' , 'react-dom' , 'react-router' ,

'redux' , 'react-redux' , 'redux-thunk'

]

config.output. filename = 'js/[name].js' ;

config.

plugins .push(

new webpack.optimize.CommonsChunkPlugin( 'lib' , 'js/lib.js' )

);

// 别忘了将  lib  添加到  html  页面

// chunks: ['app', 'lib']

React-Webpack-production 构建不适用于 nginx

【中文标题】React-Webpack-production 构建不适用于 nginx

【英文标题】：React-Webpack-production build is not working on nginx

【发布时间】：2022-01-22 21:56:45

【问题描述】：

我在反应应用程序中使用 webpack 5.64.1。在我运行命令“npm run build”之后。我在我的项目中获得构建文件夹。我将 build 文件夹中的所有文件上传到 /usr/share/nginx/html/

这是我的 nginx 配置文件

server 
    listen       80;

    listen 443 ssl;

    server_name *********;
    
    ssl_certificate /etc/ssl/certs/fullchain.pem;
    ssl_certificate_key /etc/ssl/certs/privkey.pem;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    
    location / 

        try_files $uri /index.html;

    
    
    access_log /var/log/nginx/*****-access.log;
    error_log /var/log/nginx/******.com-error.log;

当我使用浏览器访问我的网站时，它会在控制台中生成以下错误

1-Uncaught SyntaxError: Unexpected token '

在检查了它的网络选项卡后，我意识到这些文件的预览不可用。虽然这些返回 200 状态代码。

提前谢谢你

【参考方案1】：

你有没有先在public/文件夹下创建manifest.json文件？

这是示例 manifest.json

  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    ,
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"