用webpack4從零開始構建react開發環境
摘要：
專案檔案準備：
執行npm init,然後建立如下圖所示的檔案。
在index.html裡面新增
<!DOCTYPE html>
<html>
<head>
<title>The Minimal React We...
專案檔案準備：
執行npm init,然後建立如下圖所示的檔案。
在index.html裡面新增
<!DOCTYPE html> <html> <head> <title>The Minimal React Webpack Babel Setup</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html>
在webpack.config.js裡面新增
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
在package.json裡面新增
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development"
},
這樣，當執行npm start的時候，就會使用webpack-dev-server把index.js相關檔案打包，生成bundle.js，這時候瀏覽器會開啟一個視窗，執行index.html(contentBase裡面定義了），又因為index.html裡面引入了bundle.js，就可以把壓縮後的js檔案執行起來。當然引入bundle.js這一步可以由我們強大的html-webpack-plugin完成。
安裝依賴
npm install --save-dev webpack webpack-dev-server webpack-cli npm install --save-dev @babel/core @babel/preset-env npm install --save-dev babel-loader npm install --save-dev @babel/preset-react
配置babel
在根目錄下新建.babelrc檔案，然後新增
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
在webpack.config.js裡面新增babel-loader配置
module.exports = {
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
}
...
};
這個時候執行npm start,就可以在瀏覽器訪問 http://localhost :8080看到Index.html裡面的內容啦啦。