手動搭建 webpack + react 框架

轉自：https://blog.csdn.net/qq_35771567/article/details/83588854

準備

創建空項目文件夾。

建議安裝cnpm，下文所有npm可以用cnpm代替

npm install -g cnpm --registry=https://registry.npm.taobao.org

初始化 npm 環境

npm init

 一路回車即可

依賴安裝

npm i webpack  -D
npm i webpack-cli -D  (因爲webpak 到 4版本以上 就需要這個 ，不然會報錯)

創建目錄及配置文件

創建 src文件夾，src下創建webpack打包入口文件 index.js
創建webpack.config.js 並編寫配置文件。 

const path = require('path') // 引入‘path’，爲了在這裏使用絕對路徑，避免相對路徑在不同系統時出現不必要的問題
var webpack = require('webpack')
module.exports = {
    // 應用入口
    entry: {
	    app: path.join(__dirname, './src/index.js') // index.js作爲打包的入口
    },
    // 輸出目錄
    output: {
	    filename: 'build.js',
	    // filename: '[name].[hash:8].js', //name代表entry對應的名字; hash代表 整個app打包完成後根據內容加上hash。一旦整個文件內容變更，hash就會變化
	    path: path.join(__dirname, 'dist'), // 打包好之後的輸出路徑
    },
}

修改package.json 下

在script中添加如下代碼:

"build": "webpack --mode production"

執行 npm run build
就可以把src下面的index.js文件打包出來了，在dist文件夾可以看到打包文件
build.js最後可以看到寫的內容

需要引入 babel-loader 來編譯 es6

npm i babel-core babel-loader babel-preset-env -D   
npm install babel babel-cli  -D      
npm install babel-preset-react  babel-preset-es2015 -D

然後配置loader

const path = require('path') // 引入‘path’，爲了在這裏使用絕對路徑，避免相對路徑在不同系統時出現不必要的問題
var webpack = require('webpack')
module.exports = {
  // 應用入口
  entry: {
    app: path.join(__dirname, './src/index.js') // index.js作爲打包的入口
  },
  // 輸出目錄
  output: {
    filename: 'build.js',
    // filename: '[name].[hash:8].js', //name代表entry對應的名字; hash代表 整個app打包完成後根據內容加上hash。一旦整個文件內容變更，hash就會變化
    path: path.join(__dirname, 'dist'), // 打包好之後的輸出路徑
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/, //使用loader的目標文件。這裏是.js
      use: {
        loader: 'babel-loader',
        options: {
          presets: ["env", "react"] //['@babel/preset-react']
        },
      },
      exclude: [
        path.join(__dirname, '../node_modules') // 由於node_modules都是編譯過的文件，這裏我們不讓babel去處理其下面的js文件
      ]
    }]
  }
}

在項目根目錄下創建 babel 的配置文件： .babelrc （前面有個點）

{
  "presets": [
    ["es2015", {"loose": true}],
    "react"
  ]
}

此時再執行 npm run build可能報錯，

原因是"babel-loader": "^8.x.x"版本的問題，與babel-core 6.x.x不兼容，把loader降到7.1.5版本即可解決:

npm i -D [email protected]

使用html模板

使用 html-webpack-plugin 插件，webpack 可以根據你的配置生成你想要的文件 html

npm i html-webpack-plugin -D

修改配置文件，添加plugins：

const HTMLPlugin = require('html-webpack-plugin')
······
······
plugins: [
    new HTMLPlugin({
      filename: 'distTemp.html', //制定的文件，默認
      template: 'template.html' //制定html生成使用的模板文件 
    }) // 生成一個html頁面，同時在webpack編譯的時候。把我們所生成的entry都注入到這個html頁面中,路徑都是根據我們output配置的來走的。
  ]

創建html模板

再執行 npm run build
dist文件夾下就會多一個html文件

開發模式下啓動服務器並實時刷新

npm i webpack-dev-server -D

在package.json中script中添加

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

修改配置文件:
devServer.index一定要和HTMLPlugin.filename一致，否則報錯

執行 npm run dev 就會自動打開瀏覽器了，頁面就是模板頁面
安裝 react 模塊
npm i react -D
npm i react-dom -D
修改入口文件，編寫react代碼，

保存，運行npm run dev

最後推薦並致謝以下內容

webpack中文文檔： https://www.webpackjs.com/concepts/
英文文檔（推薦）： https://webpack.js.org/concepts/
幾本關於webpack的書：
1、 https://zhaoda.net/webpack-handbook/index.html
2、 http://webpack.wuhaolin.cn/
3、 https://fakefish.github.io/react-webpack-cookbook/Getting-started.html
第二本有彈出購買的遮罩層時，F12，幹掉就行了