Webpack+Postcss 手動配置

Webpack教學 (一) ：什麼是Webpack? 能吃嗎？

Webpack教學 (二) ：檔案你要去哪裡？

Webpack教學 (三)：永不停止的Watch

Webpack教學 (四)：JavaScript 與 Babel

兩個有用plugins : mini-css-extract-plugin、HtmlWebpackPlugin，文中少裝一個sass(npm i sass -D)

多個entry和output配置、js不同文件的指定引用

================== 非必要 ====================
webpack 新手教學之淺談模組化，神文!!!

webpack Postcss配置

webpack Postcss配置2 ( option那邊會報錯，請參照上一篇文 )

browserslist配置

目錄結構

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    context: path.resolve(__dirname,'src/entry'),
    entry: {
        home: './index.js',
        other: './index2.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: '[name].bundle.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            //entry當路徑起點
            template: '../html/home.html',
            //output當路徑起點
            filename: '../html/home.html',
            //處理完後的檔案名稱
            chunks: ['home']
        }),
        new HtmlWebpackPlugin({
            //entry當路徑起點
            template: '../html/other.html',
            //output當路徑起點
            filename: '../html/other.html',
            //處理完後的檔案名稱
            chunks: ['other']
        }),
        new MiniCssExtractPlugin({
            filename: '../css/[name].css',
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env']
                    }   
                }
            },
            //用css loader來處理css檔案
            {
                test: /\.css$/i,
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            //用sass loader來處理sass或scss檔案
            {
                test: /\.s[ac]ss$/i,
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    }
};

package.json

{
  "name": "1012",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --mode development --watch",
    "start": "webpack --mode development",
    "deploy": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "autoprefixer": "^10.3.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.4.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.4.2",
    "postcss": "^8.3.9",
    "postcss-loader": "^6.1.1",
    "sass": "^1.42.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "tailwindcss": "^2.2.16",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0"
  },
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ]
}