Webpack
Node.js 轉換打包套件 Webpack
Categories:
安裝執行
npm i webpack
# 解析 CSS
npm install --save-dev css-loader
npm install --save-dev style-loader
# 產生 webpack html 控制板號套件
npm install --save-dev html-webpack-plugin
# 產生 webpack css 控制板號套件
npm install --save-dev mini-css-extract-plugin
webpack serve
package.json 設定
{
"scripts" : {
"build": "NODE_ENV=production webpack",
"dev": "NODE_ENV=production webpack serve",
}
}
webpack.config.js 設定檔
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
const WebpackEnv = process.env.NODE_ENV;
module.exports = {
// 模式:development, production
mode: 'development',
// mode: WebpackEnv,
// 打包進入點
entry: './src/index..js',
// 打包檔案原始碼對應(debug)
devtool: 'source-map',
// 輸出設定
output: {
// 路徑
path: path.resolve(__dirname, 'dist'),
// 檔名
filename: 'main.bundle.js',
// 檔名加入 hash
// filename: 'main.[hash].bundle.js',
// 清除輸出目錄舊檔案
clean: true,
},
devServer: {
port: 8888,
// 開發預設進入目錄
contentBase: path.join(__dirname, 'dist')
},
module: {
rules: [
{
// 遇到 CSS 檔案
test: /\.css$/i,
// 使用 style-loader 及 css-loader
// use: ["style-loader", "css-loader"],
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
// Babel Loader
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
// 圖片處理
{
test: /\.gif/,
type: 'asset/resource'
}
]
},
plugins: [
// 產生 webpack html 控制版本號套件
new HtmlWebpackPlugin({
// 產生的 index.html 範本
template: './base.html'
}),
// 產生 webpack css 控制版本號套件
new MiniCssExtractPlugin({
// 產生的檔名
filename: 'main.[hash].css'
})
],
};
參考資料
- webpack
- webpack - npm
- Concepts | webpack
- css-loader | webpack
- HtmlWebpackPlugin | webpack
- MiniCssExtractPlugin | webpack
- Asset Modules | webpack