Webpack 基本使用方法(搭配 React & JSX & babel)

前置:

  1. 安裝 Node.js
  2. 建立專案資料夾
  3. 使用命令介面操作:我用 Visual Studio Code

Webpack 是開發時使用的

4.初始化專案

npm init -y

5.使用 NPM 安裝 webpack, webpack-cli:

npm install webpack webpack-cli — save-day

6.設置 package.json 用來執行 webpack

在 package.json 檔的 script 中加入

"build" :"webpack"

基本專案資料夾結構與運作概念:

/src/原始檔案 => webpack => /dist/可執行檔案

// 要建立 dist & src 檔案夾

//真正的網頁會寫在 dist

//程式碼可以寫在 src

7.測試基本的 webpack 使用:

npm run build

//原始碼打包成可執行檔案 → 去 dist 可以看到 main.js 檔(被打包惹~~~) 真正會在網頁上用的

//在 dist 資料夾中開個 index.html 引入 main.js

http://main.js

Webpack 搭配 React 使用(不包含 JSX)

  1. 使用 npm 安裝 react, react-dom:
npm install react react-dom — save

2.完成 React 網頁開發流程(不包含 JSX):

// 在 index.html import ,webpack 支援

import React from "react";
import ReactDOM from "react-dom";
let elem = React.createElement("h3", {}, "Hello React");
ReactDOM.render(elem, document.querySelector("#root"));

//不要忘記每次做完都要 npm run build

npm run build

用 JSX 寫 React :建立 component

//react JSX 寫法
class MyHead extends React.Component{
constructor(props){
super(props);
}

render(){
return <h3>Hello React JSX</h3>; //JSX
}
}

ReactDOM.render(<MyHead/>, document.querySelector("#root"));
  1. 搭配 React JSX 使用,設置 Babel
npm install babel-core babel-loader — save-dev

下一步:安裝更多…

npm install babel-preset-env babel-preset-react --save-dev

2. 在專案描述檔中(package.json)設置 babel

"babel": {
"presets": ["env", "react"]
},
// 放到  "main": "index.js", 下面

3.在專案描述檔中重設 babel-loader 的版本到 7.1.5,接著打:

npm install babel-loader --save-dev

4. 建立 webpack 基本設定檔 file: webpack.config.js

參考:https://webpack.js.org/guides/getting-started/#using-a-configuration
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};

5. 在 webpack 設定檔中加入 babel-loader 設定,以支援 JSX 語法,丟到 webpack.config.js 檔

// 找一個類似 loading css 的東東:https://webpack.js.org/guides/asset-management#loading-css

改成這樣:
module: {
rules: [{
test: /.js$/,
use: [
'babel-loader'
]
}]
}
};
//這樣就可以吃 JSX 檔ㄌ, babel 會被正確轉換

6.最後不要忘記:

npm run build

完成了!在 dist file 可以打開 index.html: