這次給大家帶來webpack搭建react開發環境步驟詳解，webpack搭建react開發環境的注意事項有哪些，下面就是實戰案例，一起來看一下。mkdir react-redux && cd react-redux

npm init -y

2.安裝webpacknpm 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.jsdocument.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.jsconst 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.hotplugins:[

//熱更新,不是刷新

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.jsconst 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-mergenpm 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-loadernpm 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-loadernpm install style-loader css-loader url-loader --save-dev

2.安裝 sass-loader node-sassnpm 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.jsconst 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"

})

]

});

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

總結

以上是生活随笔為你收集整理的webpack搭建php服务器,webpack搭建react开发环境步骤详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。