快捷導(dǎo)航

webpack創(chuàng)建項(xiàng)目并打包的詳細(xì)流程記錄

更新時(shí)間：2023年03月17日 12:21:48 作者：weixin_43867892

webpack在前端工程領(lǐng)域起到了中流砥柱的作用,理解它的內(nèi)部實(shí)現(xiàn)機(jī)制會(huì)對(duì)你的工程建設(shè)提供很大的幫助(不論是定制功能還是優(yōu)化打包),下面這篇文章主要給大家介紹了關(guān)于webpack創(chuàng)建項(xiàng)目并打包的詳細(xì)流程,需要的朋友可以參考下

webpack基礎(chǔ)設(shè)置

1、新建項(xiàng)目

2、在項(xiàng)目中創(chuàng)建兩個(gè)文件夾 src 和 dist，其中src文件夾用于存放開發(fā)時(shí)寫的js、css等文件，dist文件夾中存放打包后生成的bundle.js文件。

3、確保項(xiàng)目本身安裝了node

通過在terminal中輸入node -v，查看是否有node的版本號(hào)

4、確保項(xiàng)目安裝了webpack

通過在terminal中輸入webpack -v，查看是否有webpack的版本號(hào)

5、可以在terminal中輸入：

webpack ./src/main.js ./dist/bundle.js

來將src文件夾下的以main.js作為入口文件的全部文件打包到dist文件夾中的bundle.js中

由于每次都這么寫太麻煩，可以配置簡(jiǎn)單命令來實(shí)現(xiàn)。

6、創(chuàng)建webpack.config.js文件

并在文件中寫入如下代碼：

//去node中找一個(gè)叫'path'的包
const path = require('path')
 
//動(dòng)態(tài)獲取絕對(duì)路徑需要用到node語法
module.exports = {
    entry: './src/main.js',//這是入口路徑
    output: { //output出口需要寫成一個(gè)類的形式
        path: path.resolve(__dirname, 'dist'),//這是動(dòng)態(tài)的獲取的絕對(duì)路徑
        filename: 'bundle.js'
    },
}

用到node就需要npm，在terminal中輸入 npm init , 會(huì)自動(dòng)生成package.json，在package.json中添加

即可在terminal中通過輸入 npm run build 對(duì)代碼進(jìn)行打包。

關(guān)于loader

webpack會(huì)自動(dòng)處理js之間相關(guān)的依賴,但是在開發(fā)中不僅僅有基本的js代碼處理，也需要加載css、圖片，將ES6轉(zhuǎn)成ES5代碼，將TypeScript轉(zhuǎn)換成ES5代碼，將scss、less轉(zhuǎn)成css，將.jsx、.vue文件轉(zhuǎn)成js文件等。webpack本身不支持上述操作。需要加載loader。

loaders | webpack 中文網(wǎng) (webpackjs.com)

可以查看webpack的所有l(wèi)oader。

添加對(duì)loader的依賴一般都是在terminal中npm install，然后在webpack.config.js文件中添加對(duì)其的配置。

關(guān)于npm install 包的普遍報(bào)錯(cuò)的解決方法：

在包后面加上 --legacy-peer-deps

例如：

與壓縮文件相關(guān)的學(xué)習(xí)

UglifyjsWebpackPlugin插件

使用：

terminal中輸入：

npm install --save-dev uglifyjs-webpack-plugin@1.1.1 --legacy-peer-deps

webpack.config.js文件中：

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

以及在plugins中：

new UglifyjsWebpackPlugin()

這樣可以將bundle.js壓縮為一行代碼。

總結(jié)

到此這篇關(guān)于webpack創(chuàng)建項(xiàng)目并打包的文章就介紹到這了,更多相關(guān)webpack創(chuàng)建項(xiàng)目并打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: