使用webpack搭建react開(kāi)發(fā)環(huán)境

Freeman 發(fā)布于2019-08-02 10:25 / 436人閱讀

摘要：安裝和使用初始化項(xiàng)目安裝是的簡(jiǎn)寫，是指安裝模塊并保存到的中，主要在開(kāi)發(fā)環(huán)境中的依賴包如果使用版本，還需要安裝。新建一下項(xiàng)目結(jié)構(gòu)使用非全局安裝下的打包。

安裝和使用webpack

1.初始化項(xiàng)目

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

2.安裝webpack

npm i webpack -D

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

npm install -D webpack webpack-cli

3.新建一下項(xiàng)目結(jié)構(gòu)

  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

打開(kāi)dist目錄下的html顯示webpack使用

配置webpack

1.使用配置文件

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

運(yùn)行命令: node_modules.binwebpack --mode production 可以以進(jìn)行打包
2.NPM 腳本(NPM Scripts)
在在 package.json 添加一個(gè) npm 腳本(npm script)：
"build": "webpack --mode production"
運(yùn)行npm run build即可打包

使用webpack構(gòu)建本地服務(wù)器

webpack-dev-server 提供了一個(gè)簡(jiǎn)單的 web 服務(wù)器，并且能夠?qū)崟r(shí)重新加載。
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",//本地服務(wù)器所加載的頁(yè)面所在的目錄
        historyApiFallback: true,//不跳轉(zhuǎn)
        inline: true,//實(shí)時(shí)刷新
        port:3000,
        open:true,//自動(dòng)打開(kāi)瀏覽器
    }
};

運(yùn)行webpack-dev-server --progress,瀏覽器打開(kāi)localhost:3000,修改代碼會(huì)實(shí)時(shí)顯示修改的結(jié)果.
添加scripts腳本,運(yùn)行npm start自動(dòng)打開(kāi)http://localhost:8080/

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

啟動(dòng)webpack-dev-server后，在目標(biāo)文件夾中是看不到編譯后的文件的,實(shí)時(shí)編譯后的文件都保存到了內(nèi)存當(dāng)中。因此使用webpack-dev-server進(jìn)行開(kāi)發(fā)的時(shí)候都看不到編譯后的文件
2.熱更新
配置一個(gè)webpack自帶的插件并且還要在主要js文件里檢查是否有module.hot

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

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

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

在webpack.config.js中開(kāi)啟熱更新

devServer:{
        contentBase: "./dist",//本地服務(wù)器所加載的頁(yè)面所在的目錄
        historyApiFallback: true,//不跳轉(zhuǎn)
        inline: true,//實(shí)時(shí)刷新
        port:3000,
        open:true,//自動(dòng)打開(kāi)瀏覽器
        hot:true  //開(kāi)啟熱更新
    },

熱更新允許在運(yùn)行時(shí)更新各種模塊，而無(wú)需進(jìn)行完全刷新.

配置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可以防止文件緩存,每次都會(huì)生成4位hash串
        filename:"bundle.[hash:4].js",
        path:path.resolve("dist")
    },
    //以下是新增的配置
    devServer:{
        contentBase: "./dist",//本地服務(wù)器所加載的頁(yè)面所在的目錄
        historyApiFallback: true,//不跳轉(zhuǎn)
        inline: true,//實(shí)時(shí)刷新
        port:3000,
        open:true,//自動(dòng)打開(kāi)瀏覽器
        hot:true  //開(kāi)啟熱更新
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            hash:true, //會(huì)在打包好的bundle.js后面加上hash串
        })
    ]
};

運(yùn)行npm run build進(jìn)行打包,這時(shí)候每次npm run build的時(shí)候都會(huì)在dist目錄下創(chuàng)建很多打好的包.應(yīng)該每次打包之前都將dist目錄下的文件清空,再把打包好的文件放進(jìn)去,這里使用clean-webpack-plugin插件.通過(guò)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可以防止文件緩存,每次都會(huì)生成4位hash串
        filename:"bundle.[hash:4].js",
        path:path.resolve("dist")
    },
    //以下是新增的配置
    devServer:{
        contentBase: "./dist",//本地服務(wù)器所加載的頁(yè)面所在的目錄
        historyApiFallback: true,//不跳轉(zhuǎn)
        inline: true,//實(shí)時(shí)刷新
        port:3000,
        open:true,//自動(dòng)打開(kāi)瀏覽器
        hot:true  //開(kāi)啟熱更新
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            hash:true, //會(huì)在打包好的bundle.js后面加上hash串
        }),
         //打包前先清空
        new CleanWebpackPlugin("dist")
    ]
};

之后打包便不會(huì)產(chǎn)生多余的文件.

編譯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 轉(zhuǎn)換成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",//本地服務(wù)器所加載的頁(yè)面所在的目錄
        historyApiFallback: true,//不跳轉(zhuǎn)
        inline: true//實(shí)時(shí)刷新
    },
    module:{
        rules:[
            {
                test:/.js$/,
                exclude:/(node_modules)/,  //排除掉nod_modules,優(yōu)化打包速度
                use:{
                    loader:"babel-loader"
                }
            }
        ]
    }
};

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

1.安裝webpack-merge

npm install --save-dev webpack-merge

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

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可以防止文件緩存,每次都會(huì)生成4位hash串
        filename:"bundle.[hash:4].js",
        path:path.resolve(__dirname,"dist")
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            hash:true, //會(huì)在打包好的bundle.js后面加上hash串
        }),
        //打包前先清空
        new CleanWebpackPlugin("dist"),
        new webpack.HotModuleReplacementPlugin()  //查看要修補(bǔ)(patch)的依賴
    ],
    module:{
        rules:[
            {
                test:/.js$/,
                exclude:/(node_modules)/,  //排除掉nod_modules,優(yōu)化打包速度
                use:{
                    loader:"babel-loader"
                }
            }
        ]
    }
};

3.新建一個(gè)名為webpack.dev.js文件作為開(kāi)發(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, //在開(kāi)發(fā)單頁(yè)應(yīng)用時(shí)非常有用，它依賴于HTML5 history API，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.html
        contentBase:path.resolve(__dirname, "../dist"),//本地服務(wù)器所加載的頁(yè)面所在的目錄
        inline: true,//實(shí)時(shí)刷新
        open:true,
        compress: true,
        port:3000,
        hot:true  //開(kāi)啟熱更新
    },
    plugins:[
        //熱更新,不是刷新
        new webpack.HotModuleReplacementPlugin(),
    ],
});

4.新建一個(gè)名為webpack.prod.js的文件作為生產(chǎn)環(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,添加以下內(nèi)容.

import React from "react";
class App extends React.Component{
    render(){
        return (佳佳加油);
    }
}
export default App;

3.在index.js添加以下內(nèi)容.

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,提取多帶帶打包c(diǎn)ss文件
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"
         })
     ]
 });