# Webpack+Postcss 手動配置

[Webpack教學 (一) ：什麼是Webpack? 能吃嗎？](https://medium.com/i-am-mike/%E4%BB%80%E9%BA%BC%E6%98%AFwebpack-%E4%BD%A0%E9%9C%80%E8%A6%81webpack%E5%97%8E-2d8f9658241d)

[Webpack教學 (二) ：檔案你要去哪裡？](https://medium.com/i-am-mike/webpack%E6%95%99%E5%AD%B8-%E4%BA%8C-%E6%AA%94%E6%A1%88%E4%BD%A0%E8%A6%81%E5%8E%BB%E5%93%AA%E8%A3%A1-13bdada9e543)

[Webpack教學 (三)：永不停止的Watch](https://medium.com/i-am-mike/webpack%E6%95%99%E5%AD%B8-%E4%B8%89-%E6%B0%B8%E4%B8%8D%E5%81%9C%E6%AD%A2%E7%9A%84watch-dbf98ebf8356)

[Webpack教學 (四)：JavaScript 與 Babel](https://medium.com/i-am-mike/webpack%E6%95%99%E5%AD%B8-%E5%9B%9B-javascript-%E8%88%87-babel-1d7acd911e63)

[兩個有用plugins : mini-css-extract-plugin、HtmlWebpackPlugin，文中少裝一個sass(npm i sass -D)](https://jimmyswebnote.com/frontend-project-sop-and-webpack-tutorial/)

[多個entry和output配置、js不同文件的指定引用](https://blog.csdn.net/Sicily_winner/article/details/104241056)

================== 非必要 ====================
[webpack 新手教學之淺談模組化，神文!!!](https://blog.techbridge.cc/2020/01/22/webpack-%E6%96%B0%E6%89%8B%E6%95%99%E5%AD%B8%E4%B9%8B%E6%B7%BA%E8%AB%87%E6%A8%A1%E7%B5%84%E5%8C%96%E8%88%87-snowpack/)

[webpack Postcss配置](https://medium.com/%E5%B0%8F%E5%BD%A5%E5%BD%A5%E7%9A%84%E5%89%8D%E7%AB%AF%E4%BA%94%E5%9B%9B%E4%B8%89/%E5%9C%A8webpack%E4%B8%AD%E4%BD%BF%E7%94%A8postcss-%E5%92%8C-autoprefixer%E5%B9%ABcss%E8%87%AA%E5%8B%95%E5%A2%9E%E5%8A%A0%E5%89%8D%E7%B6%B4%E8%A9%9E-c06c093dc60e)

[webpack Postcss配置2 ( option那邊會報錯，請參照上一篇文 )](https://awdr74100.github.io/2020-03-05-webpack-postcssloader/)

[browserslist配置](https://juejin.cn/post/6844903669524086797)
# 目錄結構


# 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"
  ]
}