本文分上、中、下三個部分(先寫上篇)
- webpack歷險記之一個簡單的vue hellowrld (上)
- vue專案搭建之vue全家桶和element ui、規範、單元測試等等。。。(中)
- vue專案優化之打包優化，頁面載入優化等等。。。(下)
程式碼示例地址github.com/zwfun/zw-vu…
以下所有的知識都是從下面的參考文件學來的，如果看過好幾遍的同學我這篇文章就不用看了，如果沒看過的先去看幾遍，看過了實在還是不會的同學再來看我這篇文章
本文不寫具體的操作步驟, 只寫這個過程中需要什麼，具體怎麼做 以參考文件的形式給出 網上很多文章一上來就介紹安裝各種包，看完一遍之後還是一知半解，無從下手。 自己寫一個文章，按自己需要的功能載入各種包。
我要做什麼
第一次配置webpack, 就從構建一個vue的helloworld專案開始。 我需要讓webpack幫我打包vue專案
1、需要webapck做什麼
這時候是不是腦袋一片空白， 不知道從什麼地方開始。 萬事開頭難，先從我需要webpack幫我做什麼開始
- 首先當然是幫我打包vue檔案
- 我們專案中會用到css,scss,js,img,字型檔案，webpack是不是也能幫我們載入css並打包
- 我會使用es6語法，考慮到相容性問題， webpack能不能幫我轉成es5
- 開發時我需要在寫程式碼的時候實時展示我的內容，需要熱更新
- 構建整個專案
ps： 也就做5件事不多嘛
2、怎麼做
開始前先看看webpack官方中文文件-指南文件的概念和指南，也許webpack官方文件-配置部分你也應該看下
看完之後應該對webpack有一定的瞭解了， 那我們們繼續
-
webpack安裝和入口和出口配置 這些直接忽略，不會的話看官方文件的起步章節
-
webpack幫我們打包vue檔案
-
打包vue檔案需要使用到vue-loader(Vue Loader 是一個 webpack 的 loader，它允許你以一種名為單檔案元件 的格式撰寫 Vue 元件)
-
安裝vue-loader 參考官方文件-手動設定
npm install -D vue-loader vue-template-compiler
-
vue-loader webpack配置 參考官方文件-手動設定
// webpack.base.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = { module: { rules: [ // ... 其它規則 { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 請確保引入這個外掛！ new VueLoaderPlugin() ] } 複製程式碼
-
webpack幫我們打包css檔案
- 參考webpack官方文件-指南-載入css
- 參考vue-loader官方文件-使用前處理器
- 因為我會用到scss，以及在vue元件中使用css/scss，所以我需要使用一下三個loader幫我載入css。
- 'vue-style-loader',
- 'css-loader',
- 'sass-loader'
- 在正式環境下我需要webpack幫我把css提取出來，所以在正式環境中會使用MiniCssExtractPlugin.loader幫我提取css到單獨的檔案中
// 正式環境配置 rules: [ { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: 'css/' } }, 'css-loader', 'sass-loader', ] }, { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: 'css/' } }, 'css-loader' ] }, ]// 開發環境配置 rules: [ { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] 複製程式碼 -
使用babel7幫我將es6轉為es5
- babel官方文件
- babel線上試用
- babel選擇環境配置
- 使用配置檔案的方式配置babel7. 新建一個.babelrc,@babel/env這個preset包括支援現代 JavaScript（ES2015，ES2016 等）的所有外掛， @babel/plugin-transform-runtime幫我們動態轉義內建函式(像 Array.from 或 Object.assign 這樣的靜態方法，像Array.prototype.includes 這樣的例項方法)， 配置如下
{ "presets": [[ "@babel/env", { "useBuiltIns": "entry" } ]], "plugins": ["@babel/plugin-transform-runtime"] } -
載入字型和圖片等
-
字型和圖片是使用file-loader載入。配置file-loader後我們能使用像import img from './file.png'這樣的方式載入檔案
rules: [ { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] } ]
-
熱更新
- 參考使用 webpack-dev-server
- 開發環境，使用webpack-dev-server本地伺服器實現熱載入，
- webpack中配置，瀏覽器中輸入0.0.0.0:8888即可開啟專案。
devServer: { host: '0.0.0.0', historyApiFallback: true, port: 8888 },
-
構建整個專案
- 參考webpack官方文件-指南-管理輸出
- 參考設定-htmlwebpackplugin
- 參考清理 /dist 資料夾
- npm run build幫我們構建，那我們還需要點什麼呢？
- 每次打包時幫我們清空dist檔案。使用(CleanWebpackPlugin)
- 使用html模板自動將打包生成的js和css檔案注入到html模板中,使用(HtmlWebpackPlugin)
const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'zw-vue-cli', template: path.resolve(__dirname, '../', 'index.html') }) ]
well done
一個基礎的vue webpack配置就這樣完成了