webpack:? 打包工具? 前端必備
對webpack的理解：
Webpack可以看作是一個模塊的打包機(jī)祝蝠，它做的事情就是分析你的項目結(jié)構(gòu)删顶，找到了模塊以及其它的一些瀏覽器不能使用的拓展語言谢澈。并將其轉(zhuǎn)換和打包為合適的格式提供瀏覽器使用
為什么要用webpack?
Webpack 可以將多種靜態(tài)資源 js洒嗤、css、less 轉(zhuǎn)換成一個靜態(tài)文件蜻展，減少了頁面的請求
webpack的作用：
? ? ? ? ? ? ? ? ? 1.打包（可以處理js的依賴關(guān)系）
? ? ? ? ? ? ? ? ? 2.轉(zhuǎn)換（less,sass,loader工具處理）
? ? ? ? ? ? ? ? ? 3.優(yōu)化（把優(yōu)化功能做了）
webpack的一些核心東西:
? ? ? ? ? ? ? ? ? 1.入口entry
? ? ? ? ? ? ? ? ? 2.出口output
? ? ? ? ? ? ? ? ? 3.轉(zhuǎn)換器loader
? ? ? ? ? ? ? ? ? 4.模式mode
? ? ? ? ? ? ? ? ? 5.服務(wù)器devServer
webpack如何初始化配置：
(1) Entry 應(yīng)用程序的起點入口,可以是一個文件喉誊，如果傳遞一個數(shù)組，那么那么數(shù)組的每一都會執(zhí)行纵顾，也可以是一個對象伍茄。
(2) Output 位于對象最頂級鍵(key),包括了一組選項，指示webpack 如何輸出施逾，
以及哪里輸出敷矫，和他你所打包或使用webpack 載入的任何內(nèi)容例获。
(3)Plugins引入插件
(4)loader就是webpack 用來預(yù)處理模塊的，在一個模塊被引入之前曹仗，會預(yù)先
用loader處理模塊的內(nèi)容榨汤。
webpack如何打包？
webpack entry<entry> output （命令行）
webpack -config webpack.conf.js (指定webpack的配置文件)
搭建webpack步驟：
? ? ? ? ? ? ? ? 在C盤終端執(zhí)行前三個指令
? ? ? ? ? ? ? ? 1.(c)npm install webpack -g? ? 全局安裝webpack
? ? ? ? ? ? ? ? 2.(c)npm install webpack-cli -g? ? 全局安裝webpack
? ? ? ? ? ? ? ? 3.(c)npm init -y ? 創(chuàng)建webpack
? ? ? ? ? ? ? ? 4.創(chuàng)建一個src源文件整葡，src里創(chuàng)建兩個文件index.html , index.js
? ? ? ? ? ? ? ? 5.創(chuàng)建一個dist文件夾件余。它是打包生成的的文件，里面創(chuàng)建一個index.html
? ? ? ? ? ? ? ? 6.終端： webpack src/index.js --output dist/bundle.js
? ? ? ? ? ? ? ? 7 (或者). 配置webpack.config.js 文件
? ? ? ? ? ? ? ? ? ? ? ? ? ? const path = require("path")
? ? ? ? ? ? ? ? ? ? ? ? ? ? module.exports={
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //入口
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? entry:"./src/index.js",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //出口
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? output:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? path:path.resolve(__dirname,"dist")? // 設(shè)置默認(rèn)的出口位置
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? filename:"bundle.js"? ? ? ? // 設(shè)置默認(rèn)的出口的文件名
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? 終端 ：webpack
? ? ? ? ? ? ? ? ? 在src文件夾下的index.js 引入? import ... from? "路徑"
? ? ? ? ? ? ? ? 終端 ： webpack(再次打包遭居，并刪除起初dist文件夾的bundle.js)
? ? ? ? ? ? 8.webpack-dev-server? 安裝啼器，他的作用就是自動編譯? 熱加載（局部加載）
? ? ? ? ? ? ? ? cnpm i webpack-dev-server -D
? ? ? ? ? ? ? 如果出現(xiàn)圖片上的警告，就輸入以下指令：
? ? ? ? ? ? ? ? ? ? ? cnpm i webpack -D
? ? ? ? ? ? ? ? ? ? ? cnpm i webpack-cli -D( 解決警告問題)
? ? ? ? ? ? package中"scripts"內(nèi)寫入："dev": "webpack-dev-server --open --port 8080 --contentBase src --hot" 配置在scripts對象李
? ? ? ? ? ? ? ? --open? 自動打開瀏覽器?
? ? ? ? ? ? ? --port? 端口號
? ? ? ? ? ? ? --contentBase? 默認(rèn)加載路徑
? ? ? ? ? ? ? --hot? 熱加載
? ? ? 此文件終端輸入指令：? npm run dev
? ? ? ? 然后下載插件指令：? cnpm i html-webpack-plugin -D
? ? ? 可以在內(nèi)存(webpack.config)中? 取到 打包之后的 js文件
? ? ? const htmlWebpackPlugin = require("html-webpack-plugin");
? ? ? plugins:[
? ? ? ? ? ? ? new htmlWebpackPlugin({
? ? ? ? ? ? ? ? ? ? ? ? ? filename:"index.html",
? ? ? ? ? ? ? ? ? ? ? ? template:path.join(__dirname,"./src/index.html")
? ? ? ? ? })
? ? ? ]
? ? dist文件夾的index.html? 文件里面引入的js 便可 去掉了
代碼如下：
?
