1??、網(wǎng)頁(yè)中引入的靜態(tài)資源多了會(huì)有什么問(wèn)題耽梅？
- 網(wǎng)頁(yè)加載速度慢 會(huì)發(fā)起很多的二次請(qǐng)求
- 要處理錯(cuò)綜復(fù)雜的依賴關(guān)系
1.1 解決方案
合并薛窥、壓縮、精靈圖眼姐、icon字體圖標(biāo)诅迷、圖片的Base64編碼...
使用requireJS、webpack解決各個(gè)包之間的復(fù)雜依賴關(guān)系...
2??众旗、什么是webpack罢杉？
Webpack是前端的一個(gè)項(xiàng)目構(gòu)建工具，基于node開(kāi)發(fā)出來(lái)的一個(gè)前端工具贡歧，把前端開(kāi)發(fā)中用到的所有資源都變成瀏覽器可以識(shí)別的資源滩租。
3??、起步
- 安裝webpack
sudo npm install webpack -g(全局安裝) - 初始化項(xiàng)目
npm init -y - 新建webpack配置文件夾
webpack-demo
|- /dist
|- index.html
|- /src
|- index.js
|- package.json
+ |- webpack.config.js
- 編寫(xiě)webpack配置
// 導(dǎo)入路徑模塊
const path = require('path');
// 暴露出去
module.exports = {
// 打包入口 (表示webpack要打包的文件)
entry: './src/index.js',
// 打包出口 (打包至哪個(gè)文件)
output: {
// 打包后的文件名
filename: "bundle.js",
// 打包后的路徑
path: path.resolve(__dirname, "dist")
}
};
- 執(zhí)行打包命令 按照webpack.config.js文件中的配置打包
npx webpack --config webpack.config.js - 配置快速命令
在package.json文件夾中的scripts中配置一個(gè)鍵值對(duì)
"dev": "npx webpack --config webpack.config.js"
終端直接輸入npm run dev即可打包 - 配置開(kāi)發(fā)服務(wù)器 實(shí)時(shí)重新打包加載
下載
npm install --save-dev webpack-dev-server
修改webpack.config.js配置文件利朵，告訴開(kāi)發(fā)服務(wù)器(dev server)律想，在哪里查找文件
module.exports = {
...
+ // 開(kāi)發(fā)服務(wù)器
+ devServer: {
+ // 網(wǎng)站根目錄 類比與 apache www目錄
+ contentBase: './dist'
+ },
}
- 打包c(diǎn)ss
下載
npm install --save-dev css-loader
配置規(guī)則
module.exports = {
...
module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [ 'style-loader', 'css-loader' ]
+ }
+ ]
}
}
- 打包less
下載
npm install --save-dev less-loader less
配置規(guī)則
module.exports = {
...
module: {
+ rules: [{
+ test: /\.less$/,
+ use: [{
+ loader: "style-loader"
+ }, {
+ loader: "css-loader"
+ }, {
+ loader: "less-loader"
+ }]
+ }]
}
};
- 打包Vue
下載
npm install -D vue-loader vue-template-compiler
配置
// 導(dǎo)入Vue編譯
+ const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它規(guī)則
+ // 配置vue文件打包
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ }
]
},
+ plugins: [
+ // 請(qǐng)確保引入這個(gè)插件！
+ new VueLoaderPlugin()
]
}
- 啟動(dòng)項(xiàng)目
npm run serve
項(xiàng)目基本結(jié)構(gòu)
GitDemo??https://github.com/LanHai1/webpack-vue
