概念

webpack是一個打包模塊的機制,把依賴的模塊轉化成可以代表這些包的靜態文件

作用

• 打包
  • 可以把多個JavaScript文件打包成一個文件, 減少服務器壓力和下載寬帶
• 轉換
  • 把擴展語言轉換成普通的JavaScript語言,讓瀏覽器識別更順利運行
• 優化
  • 前端變的越來越復雜后,性能也會遇到各種問題,webpack肩負起優化和提升的責任

核心原理

• 一切皆模塊
  • js,css,image和html文件都可以視為模塊,通過require加載
• 按需加載
  • Webpack使用許多特性來分割代碼然后生成多個“bundle”文件，通過異步加載部分代碼來實現按需加載功能

打包原理

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

如何配置

• webpack.config.js

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

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

轉載于:https://juejin.im/post/5d0206a36fb9a07ee5661905

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的webpack打包原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。