概念

webpack是一個(gè)打包模塊的機(jī)制,把依賴的模塊轉(zhuǎn)化成可以代表這些包的靜態(tài)文件

作用

• 打包
  • 可以把多個(gè)JavaScript文件打包成一個(gè)文件, 減少服務(wù)器壓力和下載寬帶
• 轉(zhuǎn)換
  • 把擴(kuò)展語(yǔ)言轉(zhuǎn)換成普通的JavaScript語(yǔ)言,讓瀏覽器識(shí)別更順利運(yùn)行
• 優(yōu)化
  • 前端變的越來(lái)越復(fù)雜后,性能也會(huì)遇到各種問(wèn)題,webpack肩負(fù)起優(yōu)化和提升的責(zé)任

核心原理

• 一切皆模塊
  • js,css,image和html文件都可以視為模塊,通過(guò)require加載
• 按需加載
  • Webpack使用許多特性來(lái)分割代碼然后生成多個(gè)“bundle”文件，通過(guò)異步加載部分代碼來(lái)實(shí)現(xiàn)按需加載功能

打包原理

• 識(shí)別入口文件, 分析代碼, 獲取模塊依賴, 并且將代碼打包為瀏覽器可以識(shí)別的代碼
• 遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle

如何配置

• webpack.config.js

module.exports = { // 配置打包選項(xiàng) development開發(fā)環(huán)境 mode: 'development', // production 生產(chǎn)環(huán)境 // 指定入口文件：要打包的文件 entry: './src/js/index.js', // 指定輸出文件：打包之后的文件 output: {path: path.resolve(__dirname, 'dist'),filename: 'main.min.js' }, // 配置資源的加載器 loader module: {rules: [// 配置js的加載器（把ES6轉(zhuǎn)化為ES3/5代碼）{test: /\.jsx?$/,loader: 'babel-loader',//打包除這個(gè)文件之外的文件exclude: path.join(__dirname, './node_modules'),//打包包括的文件include: path.join(__dirname, './src')},// 配置css的加載器{// 匹配.css結(jié)尾的文件test: /\.css$/,// 配置css文件的加載器,處理順序：從右向左use: ['style-loader', 'css-loader']},// 配置less的加載器{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}] }, // 配置插件 plugins: [new CleanWebpackPlugin(),// 動(dòng)態(tài)生成htmlnew HtmlWebpackPlugin({title: '測(cè)試標(biāo)題',template: 'index.html'}) ], // 配置實(shí)時(shí)預(yù)覽環(huán)境 devServer: {contentBase: path.join(__dirname, 'dist'),port: 5000 } }復(fù)制代碼

• mode配置環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境
• entry指定入口文件
• output指定輸出文件
• module里的rules配置js的加載器
• modeule里的loader配置資源加載器
• plugins配置插件

轉(zhuǎn)載于:https://juejin.im/post/5d0206a36fb9a07ee5661905

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的webpack打包原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。