WebPack4.x模組化壓縮打包教程(一)
阿新 • • 發佈:2019-02-09
簡介
1:webpack是什麼?
本質上,webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)
2:webpack能幹什麼?
模組化打包:
css變成一行
html變成一行
js變成一行
去除註釋
去除多餘引號
安裝和簡單打包js
1:全域性安裝
npm install webpack -g
npm install webpack-cli -g
(npm install webpack webpack-cli -g)
2:生成package.json
npm init
3:區域性安裝 —> 生成 node_modules
npm install webpack -S
npm install webpack-cli -S
( npm install webpack webpack-cli -S)
4:打包 : webpack
預設entry入口 :src/index.js
預設output出口 :dist/main.js
壓縮: webpack --mode production 生產環境(程式碼一行)預設
未壓縮:webpack --mode development 開發環境 (開發時程式碼格式)
webpack.config講解和使用
1:webpack本身是打包js的,但是如果想要打包css,html,圖片…怎麼辦?必須要進行相關配置
2:配置
1>webpack四個核心概念
入口(entry)
輸出(output)
loader:
webpack只支援js,不支援css,圖片...,如果讓webpack支援使用loader
外掛(plugins)
有效的打包或者壓縮css,js,html,圖片...
2>配置檔案
命名:webpack.config.js
webpack-dev-sever
1:本地伺服器(dev-server)
安裝:
npm install webpack-dev-server -S
配置:
webpack.config.js: devServer:{ contentBase:"", inline port hot } package.json "scripts":{ "dev":"webpack-dev-server --open --inline" } (inline實時重新整理)