webpack是一個(gè)現(xiàn)代JavasScript應(yīng)用程序的模塊打包器(module bunder)
官方網(wǎng)站https://www.webpackjs.com/
webpack的兩大特點(diǎn)：1模塊化 2打包
作用：
1將sass/less 等預(yù)編譯的css語言轉(zhuǎn)換成瀏覽器識(shí)別的css文件
2能夠?qū)⒍鄠€(gè)預(yù)編譯文件打包成一個(gè)文件
3 打包image/styles/assets/scrips/等前端常用的文件
4 搭建開發(fā)環(huán)境開啟服務(wù)器
5 監(jiān)視文件改動(dòng)，熱部署全谤。
6 將單文件組件(*.vue)類型的文件认然，轉(zhuǎn)化成瀏覽器識(shí)別的內(nèi)容
基本使用
webpack的兩種使用方式：1命令行 2 配置文件 webpack.config.js
package
創(chuàng)建webpacktest目錄 在webpacktest下執(zhí)行
mkdir webpacktest
cd webpacktest
nmp init
生成package.json 文件
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
安裝webpack
npm i -D webpack webpack-cli
當(dāng)前webpacktest目錄下文件結(jié)構(gòu)
tree -L 1
.
├── node_modules
├── package-lock.json
└── package.json
1 directory, 2 files
創(chuàng)建helloworld.js文件
function hello() {
console.log("hello world")
}
安裝
$ ./node_modules/.bin/webpack helloworld.js
Hash: 4f3b3b08a01b5cace0ff
Version: webpack 4.34.0
Time: 322ms
Built at: 2019-06-15 13:33:42
Asset Size Chunks Chunk Names
main.js 930 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./helloworld.js 52 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
默認(rèn)輸出目錄在當(dāng)前目錄底下的默認(rèn)會(huì)創(chuàng)建dist目錄余蟹，通過-o 指定輸出目錄
./node_modules/.bin/webpack helloworld.js -o ./test/main.js --mode development
使用webpack的時(shí)候應(yīng)該提供mode 分別是生產(chǎn)模式production 或開發(fā)模式development,通過修改--mode來指定模式，默認(rèn)是生產(chǎn)模式
$ ./node_modules/.bin/webpack helloworld.js --mode development
Hash: d18edbdae5a62805073b
Version: webpack 4.34.0
Time: 75ms
Built at: 2019-06-15 13:41:21
Asset Size Chunks Chunk Names
main.js 3.83 KiB main [emitted] main
Entrypoint main = main.js
[./helloworld.js] 52 bytes {main} [built]
修改package.json的scripts
在package.json文件的scripts增加如下內(nèi)容
"scripts": {
"build": "webpack ./src/main.js --mode development"
},
在終端中執(zhí)行執(zhí)行命令
npm run build
webpack打包處理的過程：
1 運(yùn)行webpack的打包命令
2 webpack 找到我們指定的入口文件main.js
3 webpack 分析main.js 中的代碼挺峡，當(dāng)遇到imort $....語法的時(shí)候橱赠，那么webpack就會(huì)導(dǎo)入模塊代碼
配置文件webpack.config.js
在項(xiàng)目的根目錄底下創(chuàng)建webpack.config.js,注意不要使用ES6中的模塊化語法import/export
const path = require('path')
module.exports = {
// 入口
entry: path.join(__dirname,'./src/main.js'),
//出口
output: {
path: path.join(__dirname,'./dist'),
filename: 'bundle.js'
},
//模式
mode:'development'
}
將package.json修改成
"scripts": {
"build": "webpack"
},
終端執(zhí)行編譯npm run build
webpack-dev-server
1開啟服務(wù)器
2 自動(dòng)監(jiān)視文件變化 熱部署
安裝
npm i -D webpack-dev-server
在package.json添加
"scripts": {
"dev":"webpack-dev-server"
},
終端執(zhí)行命令 npm run dev
> webpack-dev-server
? ?wds?: Project is running at http://localhost:8080/
? ?wds?: webpack output is served from /
? ?wds?: Content not from webpack is served from /Users/baxiang/Web/webpacktest
? ?wdm?: wait until bundle finished: /
? ?wdm?: Hash: bc2343c1f33feabb1023
Version: webpack 4.34.0
Time: 917ms
html-webpack-plugin
加載器loader
webpack自身處理普通的JS文件，而對(duì)于非JS文件苏遥，都需要對(duì)應(yīng)的loader來進(jìn)行特殊的處理，也就是每種類型的文件师抄，都需要需要專門的loader來處理叨吮。
一般缺少loader的報(bào)錯(cuò)日志
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loade
上面的報(bào)錯(cuò)就是告知缺少css loader,需要安裝css的loader
npm i -D style-loader css-loader
