當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

react打包后图片丢失_使用 webpack 搭建 React 项目

發(fā)布時間：2024/7/23 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 react打包后图片丢失_使用 webpack 搭建 React 项目小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡評：相信很多開發(fā)者在入門 react 的時候都是使用 create-react-app 或 react-slingshot 這些腳手架來快速創(chuàng)建應用，當有特殊需求，需要修改 eject 出來的 webpack 配置文件時，面對各種配置項不知如何下手，本文會介紹如何使用 webpack 手動搭建一個 react 項目。

新建工程

先新建一個 demo 項目，項目目錄結構為：

2. 在工程根目錄新建 index.html 文件

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>My React Boilerplate</title> </head> <body><div id="app"></div> </body> </html>

3. 安裝 react react-dom 依賴：

npm i react react-dom

4. 創(chuàng)建應用 /src/components/App.js

import React, { Component } from 'react'class App extends Component {render() {return (<div><h1>Welcome to My Starter App</h1></div>)} }export default App

5. 創(chuàng)建 /src/index.js

import React from 'react' import ReactDOM from 'react-dom' import App from './components/App'import './styles/style.sass'ReactDOM.render(<App />,document.getElementById('app') )

以上就是我們的 demo 工程。如果我們通過 react-create-app 上面的代碼已經可以正常運行了，但是現在的代碼沒有進行任何的處理無法直接在瀏覽器中運行。

我們需要將 jsx 和 ES6 代碼轉換成瀏覽器中可運行的代碼。

Babel

Babel 就是為了處理上面的問題，我們可以使用 JavaScript 最新的語法特性，然后使用 babel 插件對代碼進行轉換以達到最大的兼容性。首先安裝相關依賴：

npm i babel-cli babel-core babel-preset-env babel-preset-react babel-preset-stage-2--save-dev

然后在工程跟目錄創(chuàng)建一個 .babelrc 配置文件，內容為：

{"presets": ["env", "react", "stage-2"] }

參數說明：

env：表示包含 babel-preset-es2015,babel-preset-es2016和babel-preset-es2017，意味著我們可以編寫 ES6，ES7，和 ES8 的代碼。
react：這個選項指明處理 React 的相關不能，比如 JSX。
stage-2：運行我們使用當前處于階段 2 或更高階段的 javascript 功能更多信息可以參考 TC39。

測試

剛才已經創(chuàng)建了 App.js 的 React 組件，并且安裝配置了 babel，為了代碼的健壯性我們再添加測試環(huán)境這里使用 Jest 和 Enzyme。

安裝依賴：

npm i jest enzyme enzyme-adapter-react-16 react-test-renderer --save-dev

2. 然后創(chuàng)建 /test/enzyme.setup.js 文件，添加如下代碼：

import Enzyme from 'enzyme' import Adapter from 'enzyme-adapter-react-16'Enzyme.configure({adapter: new Adapter() })

3. 在 package.json 中添加 jest 功能字段：

{ ..., "jest": {"setupTestFrameworkScriptFile": "./test/enzyme.setup.js"}, ... }

4. 編寫測試代碼：

創(chuàng)建 /test/App.test.js 文件，為 App 組件編寫測試代碼：

import App from '../src/components/App' import React from 'react' import { shallow } from 'enzyme'describe('App', () => {test('should match snapshot', () => {const wrapper = shallow(<App />)expect(wrapper.find('h1').text()).toBe('Welcome to My Starter App')expect(wrapper).toMatchSnapshot}) })

當執(zhí)行 jest ./test 來啟動測試代碼。

為了方便可以將他添加到 package.json 中：

{...,"scripts": {"test": "jest ./test"} }

Webpack

webpack 可以將我們工程代碼打包到一個文件中，比如我們有很多個 js 代碼相互依賴，打包的時候會將這些 js 文件合并成一個文件，還可以使用插件來預處理和處理最終生成的代碼。

安裝 webpack 依賴：

npm i webpack --save-dev

webpack 運行的時候回自動找到項目根目錄的 webpack.config.js 文件，所以我們可以先創(chuàng)建這個文件，并加入如下代碼。

const path = require('path')module.exports = {entry: {main: './src/index.js'},output: {filename: '[name].[hash].js',path: path.resolve('./dist'),} }

entry 指明入口文件，webpack 會從這個文件開始連接所有的依賴。 output 指明打包后的文件存放的位置。

Webpack loaders

loaders 可以讓 webpack 處理很多不同格式的文件（例如:圖片、CSS 、 JSX ...），

這里我們沒有用到圖片和 CSS 資源，只需要處理 ES6 和 JSX，只需要 babel-loader。

安裝 babel-loader:

npm i babel-loader --save-dev

然后在 webpack.config.js 文件中添加打包規(guī)則添加后代碼如下：

const path = require('path')module.exports = {entry: {main: './src/index.js'},output: {filename: '[name].[hash].js',path: path.resolve('./dist'),},module: {rules: [{test: /.js$/,exclude: ['node_modules'],use: [{ loader: 'babel-loader' }],}] }

2. 如果需要使用 Sass 和 SCSS，我們需要其他的 loader。

npm i node-sass sass-loader style-loader css-loader --save-dev

然后在 webpack.config.js 中添加 sass 和 scss 文件的轉換規(guī)則，最終代碼如下：

現在可以在工程中使用 Sass 了，創(chuàng)建 /src/styles/style.sass 文件，并添加如下代碼：

bodyfont-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serifcolor: whitebackground: black

然后在 index.js 帶人 style.sass:

import React from 'react' import ReactDOM from 'react-dom' import App from './components/App'import './styles/style.sass'ReactDOM.render(<App />,document.getElementById('app')

3. 現在有一個需求，我們需要將打包后的 js 文件自動導入到 html 文件中，我們可以使用 html-webpack-plugin 自動完成這部分內容。

安裝 html-webpack-plugin：

npm i html-webpack-plugin --save-dev

然后在 webpack.config.js 中導入這個插件：

const CleanWebpackPlugin = require('clean-webpack-plugin') const path = require('path')module.exports = {entry: {main: './src/index.js'},output: {filename: '[name].[hash].js',path: path.resolve('./dist'),},module: {rules: [{test: /.js$/,exclude: ['node_modules'],use: [{ loader: 'babel-loader' }],},{test: /.s(a|c)ss$/,use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}],}]},plugins: [new HtmlWebPackPlugin({template: 'index.html'})] }

當每次 build 的時候的時候會在 dist 目錄中生成打包后的文件，我們需要打包時清除這些內容可以使用 clean-webpack-plugin 插件：

npm i clean-webpack-plugin --save-dev

在 webpack.config.js 中添加 clean-webpack-plugin:

const CleanWebpackPlugin = require('clean-webpack-plugin') const HtmlWebPackPlugin = require('html-webpack-plugin') const path = require('path')module.exports = {entry: {main: './src/index.js'},output: {filename: '[name].[hash].js',path: path.resolve('./dist'),},module: {rules: [{test: /.js$/,exclude: ['node_modules'],use: [{ loader: 'babel-loader' }],},{test: /.s(a|c)ss$/,use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}],}]},plugins: [new HtmlWebPackPlugin({template: 'index.html'}),new CleanWebpackPlugin(['dist']),] }

所有的 plugin 和 loader 已經加載完了，為了方便我們開發(fā)，還需要 webpack 開發(fā)服務器，這樣我們就可以實時查看代碼修改的效果了。

npm i webpack-cli webpack-dev-server --save-dev

在 webpack.config.js 中添加 devServer 字段:

為了方便運行，可以將 webpack-dev-server 命令添加到 package.json 中：

{..."scripts": {"start": "webpack-dev-server","test": "jest ./test"}, }

現在只需要 npm start 就可以查看 demo 的運行效果，到這里 react webpack 項目開發(fā)環(huán)境已經算是搭建完成。

但是這個配置沒有對生產環(huán)境做區(qū)分，也就是說生產環(huán)境的代碼和開發(fā)環(huán)境代碼一樣，但實際開發(fā)中往往需要對生產環(huán)境代碼做優(yōu)化比如（壓縮 js代碼，修改變量名和方法名），在開發(fā)環(huán)境中為了編譯調試又不希望優(yōu)化這部分內容。我們可以將兩種環(huán)境區(qū)分開來。

這個時候有可以用到這個插件 webpack-merge：

npm i webpack-merge --save-dev

現在我們可以將原來的 webpack 配置文件分離成三個文件，

webpack.common.js 存放公共配置項：

webpack.dev.js 在通用配置項基礎上添加開發(fā)環(huán)境配置項：

const merge = require('webpack-merge'); const common = require('./webpack.common.js');module.exports = merge(common, {mode: 'development',devServer: {host: 'localhost',port: 3000,open: true} })

webpack.prod.js 在通用配置項基礎上中添加生成環(huán)境配置項：

const merge = require('webpack-merge'); const common = require('./webpack.common.js');module.exports = merge(common, {mode: 'production', })

最后在 package.json 中添加生產環(huán)境打包腳本：

{..."scripts": {"build": "webpack --config webpack.prod.js","start": "webpack-dev-server --config webpack.dev.js","test": "jest ./test"}, }原文：How to build your own React boilerplate

極光日報，極光開發(fā)者旗下媒體。

每天導讀三篇英文技術文章。

總結

以上是生活随笔為你收集整理的react打包后图片丢失_使用 webpack 搭建 React 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Python删除文件夹和建立文件夹
下一篇： OpenCV学习笔记（七）：形态学mor