## 注意 以下教程都是基于webpack3 ## 什么是webpack 是前端的一個項目構建工具,它是基于node.js開發出來的前端工具.webpack是基于整個項目進行構建的. ## webpack作用 1. webpack能夠處理js的兼容問題,把高級的瀏覽器不識別的的語法,轉換成低級的瀏覽器能正常識別的語法. 2. webpack能處理JS文件的互相依賴關系. 通過 ``` webpack 要打包的文件名 --output 要輸出的文件名 //webpack3 不需要加--output webpack src/main.js --output dist/bundle.js ``` 命令將main.js編譯成bundle.js文件引入到項目中.這樣就可以只用導出這一個js文件了,而不用導入使用到的js依賴文件,比如jquery. ## 最基本文件配置 每次寫輸入文件和輸出文件太麻煩了,可以在項目根目錄配置webpack.config.js文件. 直接就可以通過webpack就可以自動打包了. 當我們在終端直接輸入webpack命令執行的時候,webpack做了以下幾步: 1. 我們并沒有通過命令形式,給它指定入口和出口. 2. webpack就會去項目的根目錄中,查找一個叫做'webpack.config.js'的配置文件. 3. 找到配置文件后,解析執行配置文件.當解析執行完,就得到了配置文件中導出的配置對象. 4. 當webpack拿到了配置對象后,就拿到了配置對象中指定的入口和出口.然后進行打包構建. ``` const path = require('path'); //這個配置文件,其實就是一個JS文件,通過Node中的模塊操作,向外暴露了一個配置對象 module.exports = { //在配置文件中,指定入口和出口文件 entry: path.join(__dirname, './src/main.js'), //入口,表示要使用webpack打包那個文件 output: { //輸出文件相關的配置 path: path.join(__dirname, './dist'), //指定打包好的文件,輸出到哪個目錄中去 filename: 'bundle.js', //指定輸出文件的名稱 } }; ```