JavaScript使用Webpack打包前端項目
更新時間：2026年02月25日 10:10:23 作者：普通網(wǎng)友
在前端開發(fā)中,Webpack作為主流的模塊打包工具,能夠?qū)⒏鞣N資源整合為優(yōu)化的輸出文件,這篇文章主要介紹了JavaScript使用Webpack打包前端項目的相關(guān)資料,需要的朋友可以參考下
Webpack 配置示例
以下是一個基礎(chǔ)的 Webpack 配置示例，用于打包前端項目代碼。假設(shè)項目包含 JavaScript、CSS 和靜態(tài)資源（如圖片），并支持開發(fā)和生產(chǎn)環(huán)境的區(qū)分。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = (env, argv) => {
const isProduction = argv.mode === 'production';
return {
entry: './src/index.js',
output: {
filename: isProduction ? '[name].[contenthash].js' : '[name].js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.css$/,
use: [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
'postcss-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
type: 'asset/resource',
},
],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
...(isProduction
? [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
]
: []),
],
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
hot: true,
},
};
};
功能說明
入口與輸出配置
- 入口文件為
src/index.js，輸出到dist目錄。 - 生產(chǎn)環(huán)境下使用
[contenthash]實現(xiàn)緩存優(yōu)化。
- 入口文件為
模塊處理規(guī)則
- 使用
babel-loader轉(zhuǎn)譯 JavaScript 代碼，支持 ES6+ 語法。 - 通過
css-loader和style-loader（開發(fā)環(huán)境）或MiniCssExtractPlugin（生產(chǎn)環(huán)境）處理 CSS 文件。 - 使用
asset/resource類型處理圖片等靜態(tài)資源。
- 使用
插件配置
CleanWebpackPlugin在每次構(gòu)建前清理dist目錄。HtmlWebpackPlugin自動生成 HTML 文件并注入打包后的資源。- 生產(chǎn)環(huán)境下通過
MiniCssExtractPlugin提取 CSS 為獨立文件。
開發(fā)服務(wù)器
- 配置
devServer支持熱更新（HMR）和靜態(tài)文件服務(wù)。
- 配置
依賴安裝
運(yùn)行以下命令安裝所需依賴：
npm install webpack webpack-cli webpack-dev-server --save-dev npm install babel-loader @babel/core @babel/preset-env --save-dev npm install css-loader style-loader postcss-loader mini-css-extract-plugin --save-dev npm install html-webpack-plugin clean-webpack-plugin --save-dev
腳本配置
在 package.json 中添加以下腳本：
{
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}
}
總結(jié)
到此這篇關(guān)于JavaScript使用Webpack打包前端項目的文章就介紹到這了,更多相關(guān)JS Webpack打包前端項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了ES7之Async/await的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript使用indexOf()實現(xiàn)數(shù)組去重的方法分析
這篇文章主要介紹了JavaScript使用indexOf()實現(xiàn)數(shù)組去重的方法,結(jié)合實例形式分析了使用indexOf()方法進(jìn)行數(shù)組的判斷與去重相關(guān)原理與具體操作技巧,需要的朋友可以參考下2018-09-09
在默認(rèn)的餅狀圖里面,圖例legend顏色是黑色的,有時候根據(jù)ui需要,根據(jù)不同的背景色,下面這篇文章主要給大家介紹了關(guān)于echarts自定義legend樣式的相關(guān)資料,需要的朋友可以參考下2022-10-10
JavaScript中使用typeof運(yùn)算符需要注意的幾個坑
這篇文章主要介紹了JavaScript中使用typeof運(yùn)算符需要注意的幾個坑,本文總結(jié)了4個使用typeof運(yùn)算符要注意的問題,需要的朋友可以參考下2014-11-11
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)購物車邏輯和功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文對如何利用iframe標(biāo)簽以及js制作時鐘進(jìn)行了全面解析，分步說明，條理清晰，感興趣的朋友可以看下2016-12-12
js強(qiáng)制把網(wǎng)址設(shè)為默認(rèn)首頁
有時候你會發(fā)現(xiàn)設(shè)首頁為失效，那么來一個js強(qiáng)制設(shè)置首頁的代碼，不過為了綠色上網(wǎng)，盡量不要強(qiáng)迫你的用戶意志，弄不好網(wǎng)站用戶體驗會降低。感興趣的小伙伴可以參考一下2015-09-09
關(guān)于事件mouseover ,mouseout ,mouseenter,mouseleave的區(qū)別
mouseover ,mouseout ,mouseenter,mouseleave，都是鼠標(biāo)點擊而觸發(fā)的事件，各自代表什么意思，有哪些區(qū)別呢？下面跟著腳本之家小編一起看看吧2015-10-10
javascript 四則運(yùn)算精度修正函數(shù)代碼
JS預(yù)算精度問題確實很麻煩，這個能解決一些問題，雖然有bug.2010-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07