使用webpack搭建react開發環境

GeoLibra發表於2018-05-14

安裝和使用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中，主要在開發環境中的依賴包. 如果使用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進行開發的時候都看不到編譯後的檔案
2.熱更新
配置一個webpack自帶的外掛並且還要在主要js檔案裡檢查是否有module.hot

plugins:[
        //熱更新,不是重新整理
        new webpack.HotModuleReplacementPlugin()
    ],
複製程式碼

在主要js檔案裡新增以下程式碼

if (module.hot){
    //實現熱更新
    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目錄下建立很多打好的包.應該每次打包之前都將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 : 根據配置的 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,優化打包速度
                use:{
                    loader:'babel-loader'
                }
            }
        ]
    }
};
複製程式碼

開發環境與生產環境分離

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,優化打包速度
                use:{
                    loader:'babel-loader'
                }
            }
        ]
    }
};
複製程式碼

3.新建一個名為webpack.dev.js檔案作為開發環境配置

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, //在開發單頁應用時非常有用，它依賴於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的檔案作為生產環境配置

 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"
         })
     ]
 });
複製程式碼

react+webpack+webstorm開發環境搭建
2019-02-16
ReactWebORM開發環境
基於Webpack搭建React開發環境
2018-05-16
WebReact開發環境
Webpack 4.x搭建react開發環境
2018-08-14
WebReact開發環境
從零開始搭建webpack+react開發環境
2018-05-08
WebReact開發環境
從零搭建前端開發環境----React+Ts+Webpack基礎搭建
2023-03-11
前端開發環境ReactWeb
React Native 開發環境搭建
2019-02-11
React Native開發環境
使用Webpack配置React和Vue開發環境【超實用】
2020-04-03
WebReactVue開發環境
從零開始使用 Webpack 搭建 Vue3 開發環境
2020-07-09
WebVue開發環境
搭建 react + typescript + ant design 開發環境
2019-05-10
ReactTypeScript開發環境
React基礎——快速搭建開發環境
2018-04-01
React開發環境
webpack4 x 快速搭建vue開發環境
2019-03-03
WebVue開發環境
基於 Webpack4 搭建 Vue 開發環境
2018-10-14
WebVue開發環境
React Native——搭建開發環境、建立Hello World
2019-03-04
React Native開發環境
Windows下React Native開發環境的搭建
2018-05-06
WindowsReact Native開發環境
react環境搭建
2020-07-21
React
使用 Rainbond 搭建本地開發環境
2022-11-29
AI開發環境
使用 Docker 搭建本地開發環境！
2022-09-09
Docker開發環境
使用 PhpStorm + Docker 搭建開發環境
2021-05-18
PHPORMDocker開發環境
在Mac搭建react-native iOS開發環境
2019-01-17
MacReactiOS開發環境
在 Windows 上搭建 React Native IOS 開發環境
2019-03-01
WindowsReact NativeiOS開發環境
從頭開始-手把手用webpack4搭建vue/react環境
2019-03-06
WebVueReact
webpack學習筆記：搭建基本的前端開發環境
2018-07-02
Web筆記前端開發環境
React Native 環境搭建
2019-02-16
React Native
react 配置開發環境
2019-02-27
React開發環境
從零開始搭建一個 Webpack 開發環境配置（附 Demo）
2019-01-30
Web開發環境
PHP開發環境 03 - 使用KFKDock搭建PHP專案環境
2021-09-09
PHP開發環境
Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)
2019-12-03
Flutter開發環境VSCode
使用React搭建初始化環境（React入門）
2018-12-24
React
vue+node+webpack搭建環境
2018-04-29
VueWeb
Webpack(開發、生產環境配置)
2020-11-13
Web
React Native搭建開發環境/link原生依賴問題
2019-04-20
React Native開發環境
JAVA開發環境搭建
2024-10-10
Java開發環境
Theia 開發環境搭建
2023-03-28
開發環境
Qt開發環境搭建
2024-05-01
QT開發環境
GeoServer開發環境搭建
2024-05-04
Server開發環境
lua 開發環境搭建
2024-06-01
開發環境
前端開發環境搭建
2020-09-25
前端開發環境
QEMU 開發環境搭建
2020-10-15
開發環境