使用webpack搭建react開發環境

時間 2019-11-06

原文原文鏈接

安裝和使用webpack

1.初始化項目javascript

mkdir react-redux && cd react-redux
npm init -y
複製代碼

2.安裝webpackcss

npm i webpack -D
複製代碼

npm i -D 是 npm install --save-dev 的簡寫，是指安裝模塊並保存到 package.json 的 devDependencies中，主要在開發環境中的依賴包. 若是使用webpack 4+ 版本，還須要安裝 CLI。html

npm install -D webpack webpack-cli
複製代碼

3.新建一下項目結構java

react-redux
  |- package.json
+ |- /dist
+   |- index.html
  |- /src
    |- index.js
複製代碼

index.htmlnode

<!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.jsreact

document.querySelector('#root').innerHTML = 'webpack使用';
複製代碼

非全局安裝下的打包。webpack

node_modules\.bin\webpack src\index.js --output dist\bundle.js --mode development
複製代碼

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

配置webpack

1.使用配置文件web

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便可打包npm

使用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"
         })
     ]
 });
複製代碼