使用webpack搭建react開發環境

wanglu1209 發布于2019-08-29 15:22 / 2776人閱讀

摘要：安裝和使用初始化項目安裝是的簡寫，是指安裝模塊并保存到的中，主要在開發環境中的依賴包如果使用版本，還需要安裝。新建一下項目結構使用非全局安裝下的打包。

安裝和使用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




    
    Title

index.js

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

非全局安裝下的打包。

node_modules.binwebpack srcindex.js --output distundle.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.binwebpack --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 (佳佳加油);
    }
}
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(
    
        
    ,
    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"
         })
     ]
 });

GPU云服務器云服務器 php開發環境使用開發環境搭建搭建開發環境安卓開發環境搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/113273.html

react實時熱更新開發環境搭建

摘要：搭建一個實時熱更新開發環境，當代碼變更時，可以不用重新啟動打包文件，這樣會很大地提高我們的開發效率。完成開發環境搭建。搭建一個react實時熱更新開發環境，當代碼變更時，可以不用重新啟動webpack打包文件，這樣會很大地提高我們的開發效率。使用工具 vscode編輯器，可以實時git推送更新自帶git命令行，隨意下載各種語言框架代碼格式化高亮插件 chrome ^58瀏覽器性能...

princekin 2019-08-29 12:32 評論0 收藏0
react實時熱更新開發環境搭建

摘要：搭建一個實時熱更新開發環境，當代碼變更時，可以不用重新啟動打包文件，這樣會很大地提高我們的開發效率。完成開發環境搭建。搭建一個react實時熱更新開發環境，當代碼變更時，可以不用重新啟動webpack打包文件，這樣會很大地提高我們的開發效率。使用工具 vscode編輯器，可以實時git推送更新自帶git命令行，隨意下載各種語言框架代碼格式化高亮插件 chrome ^58瀏覽器性能...

Vultr 2019-08-20 16:22 評論0 收藏0
React系列---Webpack環境搭建（二）不同環境不同配置

摘要：系列環境搭建一手動搭建系列環境搭建二不同環境不同配置系列環境搭建三打包性能優化實際項目中，往往不同環境有不同的構建需求。 React系列---Webpack環境搭建（一）手動搭建React系列---Webpack環境搭建（二）不同環境不同配置React系列---Webpack環境搭建（三）打包性能優化實際項目中，往往不同環境有不同的構建需求。比如開發、測試和生產環境對應的后端接口地...

coordinate35 2019-08-20 17:35 評論0 收藏0
手把手教你從零搭建react局部熱加載環境

摘要：有沒有辦法實現就局部刷新呢當然是有第十步執行為了實現局部熱加載，我們需要添加插件。前言用了3個多月的vue自認為已經是一名合格的vue框架api搬運工，對于vue的api使用到達了一定瓶頸，無奈水平有限，每每深入底層觀賞源碼時候都迷失了自己。遂決定再找個框架學習學習看看能否突破思維局限，加上本人早已對React、RN技術垂涎已久,于是決定找找教程來學習。無奈第一步就卡在了環境搭...

quietin 2019-08-21 17:23 評論0 收藏0
react+webpack+webstorm開發環境搭建

摘要：先是基礎知識，首先是補了的基礎，使用了的入門教程。另外關于，慕課的視頻教程講的也比較清晰，適合入門統統過了一遍之后，開始建立腳手架，正式上馬編寫。廢話不多說了，下面一步一步開始了。安裝完成之后，記得設置路徑構建項目使用新建一個空白項目。前言春節期間，更新了一下自己關于前端的知識體系，要知道對于前端技術，我還是停留在JSP，JQUERY的時代，現在項目里面使用REACT作為前臺，所以...

Snailclimb 2019-08-26 11:48 評論0 收藏0