目錄
-
webpack是什么,有哪些同類工具
- webpack項(xiàng)目打包工具,項(xiàng)目構(gòu)建工具,有什么作用
- 構(gòu)建單頁應(yīng)用(disk) npm i http-server -g
- 代碼壓縮
- ...... (2) 同類工具
- 百度fis3
- grunt
- gulp
-
webpack最大的特點(diǎn)
- 一切皆模塊
-
webpack安裝
安裝
node(node提供了npm)設(shè)置淘寶鏡像: node.js的模塊(插件)存放在網(wǎng)站,https://www.npmjs.com,淘寶鏡像會(huì)同步該網(wǎng)站的模塊 設(shè)置方法: npm config set registry http://registry.npm.taobao.org/
npm i webpack -g(-g全局安裝, --save-dev安裝到本目錄)-
npm i webpack-cli -gps: 有時(shí)打包的時(shí)候提示xxx not fund 解決方案:
- 方法一: 安裝缺的模塊
npm i xxx --save-dev - 方法二: 把
webpack和webpack-cli卸載后重裝,有時(shí)它們出問題了,丟失了某些東西 - 卸載方法
npm uninstall webpack -g
npm uninstall webpack-cli -g
- 方法一: 安裝缺的模塊
-
nodejs模塊系統(tǒng)
- 導(dǎo)出 cat.js
const cat = {
age: 2,
name: '白貓'
}
module.exports = cat;//導(dǎo)出m1.js里的cat
- 導(dǎo)入到 index.js
const aa = require('./cat.js');
consoe.log(aa.name);
- 打開命令提示符,進(jìn)入index.js所在目錄,運(yùn)行
node index.js看是否打印出"白貓"
webpack的核心概念
webpack的核心概念有四個(gè): 入口和出口, 模式, loader, 插件
-
入口和出口(輸出) demo1
新建一個(gè)文件夾
初始化
package.json
npm init -y-
新建
webpack.config.js文件(固定的),配置入口和出口- 入口: 項(xiàng)目從哪里開始打包,打包的過程中,把相關(guān)的文件全部打成一個(gè)包, ps:入口文件通常叫
main.js - 出口: 打包完成之后,文件名叫什么,放到哪里
- 入口: 項(xiàng)目從哪里開始打包,打包的過程中,把相關(guān)的文件全部打成一個(gè)包, ps:入口文件通常叫
-
在項(xiàng)目的目錄運(yùn)行打包命令
webpack
圖五.jpg
-
模式(環(huán)境) mode配置(詳細(xì)請看webpack文檔) demo1
-
mode: 'development'開發(fā)環(huán)境
2.mode: 'production'生產(chǎn)環(huán)境
-
-
loader 加載器(解釋器)
在webpak世界里,一切皆模塊
webpack默認(rèn)只認(rèn)識(shí)js模塊,其它的模塊都需要相應(yīng)的loader來解析(解釋)
-
配置css-loader(步驟)
- 新建demo2
- 初始化package.json
- 配置入口和出口
- 配置css-loader
- 在npmjs.com找到css-loader,安裝上面的說明進(jìn)行配置
- 配置好之后,執(zhí)行打包命令
- 新建一個(gè)html文件把打包出來的js文件放進(jìn)去html運(yùn)行檢查效果
- 注:
css-loader依賴style-loader,所以要安裝style-loader
npm i style-loader --save-dev
-
配置less-loader
- 配置方法類似css-loader
錯(cuò)誤信息 You may need an appropriate loader to handle this file type 你需要配置一個(gè)合適的loader
-
plugins 插件 demo3
-
html插件
html-webpack-plugin- 安裝
npm i html-webpack-plugin --save-dev - 導(dǎo)入
html-webpack-plugin模塊 - 配置(webpack文檔)
- 踩坑: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 解決方案 npm link webpack --save-dev
- 安裝
webpack.DefinePlugin 配置全局變量
-
-
alias別名配置(為什么@能代替src)
-
dev-server demo4
安裝 npm i webpack-dev-server -g
配置htmlWebpackPlugin
配置devServer(看webpack文檔)
運(yùn)行命令
webpack-dev-server-
配置
npm run dev啟動(dòng)命令 (或者npm run start是怎么來的)在package.json的scripts里配置的
