手把手的webpack + react教學

首先先開一個專案
npm init

開好專案之後，安裝webpack

npm install webpack webpack-cli --save-dev
npm install react react-dom
npm i @babel/core babel-loader @babel/preset-env --save-dev

安裝完之後，安裝react 和 react-dom，為了要用React
之後再安裝Babel，為了可以寫ES6+


安裝成devdependices是因為它只有開發的時候需要，因為build完就是編譯過後的。(同理，webpack也是）

還有webpack-dev-server

npm i webpack-dev-server -D

接下來，分資料夾dist和src
在src資料夾建個檔案 index.js

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hi Luna';
  return element;
}

document.body.appendChild(component());

建好之後在根目錄再建一個資料夾dist，建一個index.html檔案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cuteLuna</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

注意這裡的main.js會自己生成
跑npx webpack就可以打包嘍！！

打包完變這樣

之後為了更客製化的設定，建一個webpack.config.js檔

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
再來打包，注意它的 mode: ‘production’ 其實是預設值，可是不打在設定檔的話，它會跳警告。
這裡的打包檔案說： main.js的大小是110bytes，比./src/index.js 166 bytes 還小
在package.json加這行，就不用一直打 npx webpack，可以改成打npm run build… (更長欸)
不過編輯器可以用按的啦

  1. npm init
  2. 安裝webpack、webpack-cli
  3. 安裝react、reactDOM
  4. 安裝babel
  5. 建一個webpack.config.js檔來客製化設定webpack


生產需要用的套件，要用npm i，測試的套件( eslint, testing library… ) 安裝指令是npm i -D

By stating what dependencies a module needs, webpack can use this information to build a dependency graph.
webpack會依你import的套件，來生成一個dependency graph

平常要跑webpack，指令是npx webpack

接下來要做更進一步的設定

const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.(scss|css)$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

接下來參考這篇把dev-server架起來：
架webpack-dev-server在本機端跑跑

我的github參考：
https://github.com/catsheue/webpack

另外，為了不要手動改 index.html檔，需要這個套套：
HtmlWebpackPlugin

Post Views: 112