01webpack介紹、基礎配置

webpack介紹、基礎配置

webpack介紹

• webpack能夠作的事情
  代碼轉換、文件優化、代碼分割、模塊合併、自動刷新、代碼校驗、自動發佈
• 須要提早掌握的內容
  一、須要node基礎，以及npm的使用
  二、掌握es6語法
• 本課程最終掌握的webpack哪些內容？
  一、webpack常見配置
  二、webpack高級配置
  三、webpack優化策略
  四、ast抽象語法樹
  五、webpack中的Tapable
  六、掌握webpack流程，手寫webpack
  七、手寫webpack中常見的loader
  八、手寫webpack中常見的plugin

webpack安裝

• 安裝本地的webpack
• webpack webpack-cli -D（-D是指開發依賴，表示上線不須要這個包）

例如：這裏用的是yarn管理工具

1. 初始化：yarn init -y
2. 安裝webpack-cli：yarn add webpack webpack-cli -D

webpack能夠進行0配置

• 打包工具 -> 輸出後的結果（js模塊）
• 打包（支持咱們的js的模塊化）
• 打包命令：npx webpack（webpack5.0以上支持）
  執行原理：這樣執行會去找node_modules下的bin文件夾，bin中有webpack.cmd文件，而後就執行webpack/webpack.js文件，而後須要安裝webpack-cli
  webpack.cmd

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\webpack\bin\webpack.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\webpack\bin\webpack.js" %*
)

手動配置webpack

• 默認配置文件的名字 webpack.config.js
• 爲何叫webpack.config.js這個名字？
  由於node_moudes下的webpack下會默認調用webpack-cli，webpack-cli裏面有解析module.exports對象中的參數，在config-yargs.js裏，這裏面有解析的關係和說明，你能夠搜索關鍵字webpack.config.js來查找。

webpack.config.js

//webpack 是node寫出來的，用node的寫法
let path = require('path');

//console.log(path.resolve('dist'));
module.exports = {
    mode: 'development',//模式，默認有兩種production / development
    entry: './src/index.js',//入口
    output: {
        filename: 'bundle.js',//打包後的文件名
        path: path.resolve(__dirname,'dist')//路徑必須是一個絕對路徑
    }
}