webpack的安裝

注意：提前安裝node最新版的環境

// 專案中安裝，cli命令
npm i  webpack webpack-cli -D

webpack的使用

webpack4以後可以實現0配置

// npx 找webpack的預設配置檔案
npx webpack

index.js

// commonJs規範，瀏覽器中無法使用其匯入模組
// let a = require('./a.js')
// es6匯入匯出規範
import a from './a.js'
console.log(a)
console.log("hello world!")

a.js

console.log("a模組")
// commonJS規範
// module.exports = {
//     name: "aaa"
// }

// ES6規範
export default {
    name: 'aaa'
}
 

輸出：

webpack配置

webpackjs.com/concepts

1. entry
2. output
3. loader
4. plugins

webpack.config.js

// 遵循commonJS規範

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        // path.resolve(): 解析當前相對路徑的絕對路徑
        // path.join(): 路徑拼接
        // path: path.resolve('./dist/'),
        path: path.join(__dirname,'./dist/'),
        filename:'bundle.js'
    },
    mode: 'development'
}
 

//多個配置檔案
npx webpack --config xxx.js

package.json

{
    "scripts": {
        "build":"webpack --config webpack.config.js"
    }
}

自動編譯 watch webpack-dev-server

npm i webpack-dev-server webpack -D

webpack.config.js

// 遵循commonJS規範

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        // path.resolve(): 解析當前相對路徑的絕對路徑
        // path.join(): 路徑拼接
        // path: path.resolve('./dist/'),
        path: path.join(__dirname,'./dist/'),
        filename:'bundle.js'
    },
    mode: 'development',
    devServer: {
        open: true,
        hot: true,
        compress: true,
        port: 3000,
        static: './src'
    }
}
 

package.json

{
    "scripts": {
        "build": "webpack --config webpack.config.js",
        "watch": "webpack --watch",
        "dev": "webpack-dev-server"
    },
    "devDependencies": {
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1"
    }
}

html外掛

// 遵循commonJS規範

const path = require('path')
const HtmlWebpackPlugin =  require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        // path.resolve(): 解析當前相對路徑的絕對路徑
        // path.join(): 路徑拼接
        // path: path.resolve('./dist/'),
        path: path.join(__dirname,'./dist/'),
        filename:'bundle.js'
    },
    mode: 'development',
    devServer: {
        open: true,
        hot: true,
        compress: true,
        port: 3000,
        static: './src'
    },
    plugins:[
        // devserver時，index.html 放伺服器根目錄下
        // devserver時，index.html 自動引入bundle.js
        // 打包時放到dist目錄下
        new HtmlWebpackPlugin({
            filename:'index.html',
            template: './src/index.html'
        })
    ]
}

webpack-dev-middleware 搭建伺服器

npm i express webpack-dev-middleware

loader：css

npm i css-loader style-loader -D

main.js

import './css/index.css'

webpack.config.js

module: {
    rules: [
        {
            // \轉義 $以結尾
            test: /\.css$/,
            // css-loader 解析css檔案 style-loader 放到html中
            use:['style-loader','css-loader']
        }
    ]
}

loadre: less sass

npm i less-loader -D

main.js

import './less/index.less'

webpack.config.js

module: {
   rules: [
        {
            // \轉義 $以結尾
            test: /\.css$/,
            // css-loader 解析css檔案 style-loader 放到html中
            use:['style-loader','css-loader']
        },
        {
            test: /\.less$/,use:['style-loader','css-loader','less-loader']
        }
    ]
}

loader: 圖片 字型

npm i file-loader -D
npm i url-loader -D

webpack.config.js

module: {
    rules: [
        {
            // \轉義 $以結尾
            test: /\.css$/,
            // css-loader 解析css檔案 style-loader 放到html中
            use:['style-loader','css-loader']
        },
        {
            test: /\.less$/,use:['style-loader','css-loader','less-loader']
        },
        // {
        //     test: /\.(jpg|jpeg|png|gif|woff|Woff2|eot|svg|ttf)$/,use:['file-loader']
        // },
        {
            test: /\.(jpg|jpeg|png|gif|woff|Woff2|eot|svg|ttf)$/,use:{
                loader: 'url-loader',
                option: {
                    limit: 5 * 1024
                }
            }
        }
    ]
}

babel

babeljs.cn babeljs.io

// 預設
npm i babel-loader @babel/core @babel/preset-env webpack -D
// 高階語法
npm i @babel/plugin-proposal-class-properties -D
// 語法補丁
npm i @babel/polyfill -S

babelrc

{
    // 預設
    "presets":["@babel/env"],
    // 高階
    "plugins":[
        "@babel/plugin-proposal-class-properties"
    ]
}

source map

webpackjs.com/configuration/devtool
webpack.config.js

// 開發環境
devtool:'eval-cheap-module-source-map'
// 生產環境
devtool:'none'

外掛

npmjs.com
clean-webpack-plugin build時自動清除dist目錄

npm i clean-webpack-plugin -D

webpack.config.js

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

plugins:[
        new CleanWebpackPlugin()
    ]

copy-webpack-plugin 搬運靜態檔案

npm i copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins:[
    new CopyWebpackPlugin(
    {patterns: [
        {
            // __dirname 根目錄
            from: path.join(__dirname,'assets'),
            to:'assets'
        }
    ]})
]

BannerPlugin 內建外掛

const webpack = require('webpack')

plugins:[
   new webpack.BannerPlugin('版權資訊')
]