使用webpack搭建react開發(fā)環(huán)境的方法

更新時間：2018年05月15日 10:06:23 作者：啊哈HL

本篇文章主要介紹了使用webpack搭建react開發(fā)環(huán)境的方法，在這篇文章中我們開始利用我們之前所學搭建一個簡易的React開發(fā)環(huán)境，用以鞏固我們之前學習的Webpack知識。一起跟隨小編過來看看吧

1.初始化項目

mkdir react-redux && cd react-redux
npm init -y

2.安裝webpack

npm i webpack -D

npm i -D 是 npm install --save-dev 的簡寫，是指安裝模塊并保存到 package.json 的 devDependencies中，主要在開發(fā)環(huán)境中的依賴包. 如果使用webpack 4+ 版本，還需要安裝 CLI。

npm install -D webpack webpack-cli

3.新建一下項目結構

react-redux
 |- package.json
+ |- /dist
+  |- index.html
 |- /src
  |- index.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>

index.js

document.querySelector('#root').innerHTML = 'webpack使用';

非全局安裝下的打包。

node_modules\.bin\webpack src\index.js --output dist\bundle.js --mode development

打開dist目錄下的html顯示 webpack使用

配置webpack

1.使用配置文件

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

運行命令: node_modules\.bin\webpack --mode production 可以以進行打包 2.NPM 腳本(NPM Scripts) 在在 package.json 添加一個 npm 腳本(npm script)： "build": "webpack --mode production" 運行 npm run build 即可打包

使用webpack構建本地服務器

webpack-dev-server 提供了一個簡單的 web 服務器，并且能夠實時重新加載。

1.安裝 npm i -D webpack-dev-server 修改配置文件webpack.config.js

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true,//實時刷新
    port:3000,
    open:true,//自動打開瀏覽器
  }
};

運行 webpack-dev-server --progress ,瀏覽器打開localhost:3000,修改代碼會實時顯示修改的結果. 添加scripts腳本,運行 npm start 自動打開 http://localhost:8080/

"start": "webpack-dev-server --open --mode development"

啟動webpack-dev-server后，在目標文件夾中是看不到編譯后的文件的,實時編譯后的文件都保存到了內存當中。因此使用webpack-dev-server進行開發(fā)的時候都看不到編譯后的文件

2.熱更新

配置一個webpack自帶的插件并且還要在主要js文件里檢查是否有module.hot

plugins:[
    //熱更新,不是刷新
    new webpack.HotModuleReplacementPlugin()
  ],

在主要js文件里添加以下代碼

if (module.hot){
  //實現(xiàn)熱更新
  module.hot.accept();
}

在webpack.config.js中開啟熱更新

devServer:{
    contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true,//實時刷新
    port:3000,
    open:true,//自動打開瀏覽器
    hot:true //開啟熱更新
  },

熱更新允許在運行時更新各種模塊，而無需進行完全刷新.

配置Html模板

1.安裝html-webpack-plugin插件

npm i html-webpack-plugin -D

2.在webpack.config.js里引用插件

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    //添加hash可以防止文件緩存,每次都會生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve('dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true,//實時刷新
    port:3000,
    open:true,//自動打開瀏覽器
    hot:true //開啟熱更新
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //會在打包好的bundle.js后面加上hash串
    })
  ]
};

運行 npm run build 進行打包,這時候每次npm run build的時候都會在dist目錄下創(chuàng)建很多打好的包.應該每次打包之前都將dist目錄下的文件清空,再把打包好的文件放進去,這里使用clean-webpack-plugin插件.通過 npm i clean-webpack-plugin -D 命令安裝.然后在webpack.config.js中引用插件.

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    //添加hash可以防止文件緩存,每次都會生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve('dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true,//實時刷新
    port:3000,
    open:true,//自動打開瀏覽器
    hot:true //開啟熱更新
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //會在打包好的bundle.js后面加上hash串
    }),
     //打包前先清空
    new CleanWebpackPlugin('dist')
  ]
};

之后打包便不會產生多余的文件.

編譯es6和jsx

1.安裝babel npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader: babel加載器 babel-preset-env : 根據(jù)配置的 env 只編譯那些還不支持的特性。 babel-preset-react: jsx 轉換成js

2.添加.babelrc配置文件

{
 "presets": ["env", "stage-0","react"] //從左向右解析
}

3.修改webpack.config.js

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,優(yōu)化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};

開發(fā)環(huán)境與生產環(huán)境分離

1.安裝 webpack-merge

npm install --save-dev webpack-merge

2.新建一個名為webpack.common.js文件作為公共配置,寫入以下內容：

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
  entry:['babel-polyfill','./src/index.js'],
  output:{
    //添加hash可以防止文件緩存,每次都會生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve(__dirname,'dist')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //會在打包好的bundle.js后面加上hash串
    }),
    //打包前先清空
    new CleanWebpackPlugin('dist'),
    new webpack.HotModuleReplacementPlugin() //查看要修補(patch)的依賴
  ],
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,優(yōu)化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};

3.新建一個名為webpack.dev.js文件作為開發(fā)環(huán)境配置

const merge=require('webpack-merge');
const path=require('path');
let webpack=require('webpack');
const common=require('./webpack.common.js');
module.exports=merge(common,{
  devtool:'inline-soure-map',
  mode:'development',
  devServer:{
    historyApiFallback: true, //在開發(fā)單頁應用時非常有用，它依賴于HTML5 history API，如果設置為true，所有的跳轉將指向index.html
    contentBase:path.resolve(__dirname, '../dist'),//本地服務器所加載的頁面所在的目錄
    inline: true,//實時刷新
    open:true,
    compress: true,
    port:3000,
    hot:true //開啟熱更新
  },
  plugins:[
    //熱更新,不是刷新
    new webpack.HotModuleReplacementPlugin(),
  ],
});

4.新建一個名為webpack.prod.js的文件作為生產環(huán)境配置

const merge = require('webpack-merge');
 const path=require('path');
 let webpack=require('webpack');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   mode:'production',
   plugins: [
     new UglifyJSPlugin()
   ]
 });

配置react

1.安裝react、

react-dom npm i react react-dom -S

2.新建App.js,添加以下內容.

import React from 'react';
class App extends React.Component{
  render(){
    return (<div>佳佳加油</div>);
  }
}
export default App;

3.在index.js添加以下內容.

import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import App from './App';
ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}

4.安裝 react-hot-loader

npm i -D react-hot-loader

5.修改配置文件在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要寫在entry 的最前面，如果有 babel-polyfill 就寫在babel-polyfill 的后面

6.在 .babelrc 里添加 plugin, "plugins": ["react-hot-loader/babel"]

處理SASS

1.安裝 style-loader css-loader url-loader

npm install style-loader css-loader url-loader --save-dev

2.安裝 sass-loader node-sass

npm install sass-loader node-sass --save-dev

3.安裝 mini-css-extract-plugin ,提取單獨打包css文件

npm install --save-dev mini-css-extract-plugin

4.配置webpack配置文件

webpack.common.js

{
  test:/\.(png|jpg|gif)$/,
  use:[
    "url-loader"
  ]
},

webpack.dev.js

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

webpack.prod.js

const merge = require('webpack-merge');
 const path=require('path');
 let webpack=require('webpack');
 const MiniCssExtractPlugin=require("mini-css-extract-plugin");
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   mode:'production',
   module:{
     rules:[
       {
         test:/\.scss$/,
         use:[
           // fallback to style-loader in development
           process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
           "css-loader",
           "sass-loader"
         ]
       }
     ]
   },
   plugins: [
     new UglifyJSPlugin(),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
       filename: "[name].css",
       chunkFilename: "[id].css"
     })
   ]
 });

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

在console中打印React Fiber樹的操作步驟
React Fiber 是 React 16 中引入的新的協(xié)調引擎或重寫的核心算法, 真針Fiber的一個重要的核心概念Fiber Node,這次主要的研究對象是：如何從使用者/學習者角度在js 代碼上拿到fiber 樹結構的信息,,需要的朋友可以參考下
2024-04-04
react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html
Grapes插件是一種用于Web開發(fā)的開源工具,可以幫助用戶快速創(chuàng)建動態(tài)和交互式的網(wǎng)頁元素,它還支持多語言和多瀏覽器,適合開發(fā)響應式網(wǎng)頁和移動應用程序,這篇文章主要介紹了react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html,需要的朋友可以參考下
2023-08-08
關于useEffect執(zhí)行兩次的問題及解決
這篇文章主要介紹了關于useEffect執(zhí)行兩次的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
react 路由Link配置詳解
本文主要介紹了react 路由Link配置詳解，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)
這篇文章主要介紹了react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
React中嵌套組件與被嵌套組件的通信過程
這篇文章主要介紹了React中嵌套組件與被嵌套組件的通信過程，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-07-07
React的createElement和render手寫實現(xiàn)示例
這篇文章主要為大家介紹了React的createElement和render手寫實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Jira 任務管理系統(tǒng)項目總結講解
這篇文章主要為大家介紹了Jira 任務管理系統(tǒng)項目總結講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
詳解React如何使用??useReducer???高階鉤子來管理狀態(tài)
useReducer是React中的一個鉤子,用于替代?useState來管理復雜的狀態(tài)邏輯,本文將詳細介紹如何在React中使用?useReducer高階鉤子來管理狀態(tài),感興趣的可以了解下
2025-02-02
react-redux中connect的裝飾器用法@connect詳解
這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01