如何用webpack4帶你實(shí)現(xiàn)一個vue的打包的項(xiàng)目
一個用webpack4打包的vue 的項(xiàng)目,參照vue-cli的webpack配置,
一步一步帶你實(shí)現(xiàn)一個vue的打包的項(xiàng)目,每一個commit對應(yīng)一個步驟。
github 地址
clone project
git clone git@github.com:naihe138/nvue.git
install
npm install or yarn
一、初始化項(xiàng)目
初始化項(xiàng)目,用vue-loader來打包.vue文件,html-webpack-plugin插件來導(dǎo)出html文件。
第一步我們很簡單,就利用vue-loader 和 babel-loader 是把.vue文件打包出來,總共才40多行代碼,看build/webpack.base.conf.js文件注釋就看的懂。+++表示有省略的代碼
module.exports = { +++ // 模塊,loader module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', exclude: /node_modules/, include: resolve('src') }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, include: resolve('src') } ] } +++ }
運(yùn)行 webpack --config build/webpack.base.conf.js
二、打包c(diǎn)ss和圖片等資源
這里打包c(diǎn)ss以sass 為例,用到了mini-css-extract-plugin
插件提取css,用url-loader
來處理字體、圖片、音頻等資源。非常簡單。如下代碼,+++表示有省略的代碼
+++ module.exports = { +++ // 模塊,loader module: { rules: [ +++ { test: /\.s?css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] }, { test: /.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[hash:7].[ext]' } } +++ ] }, // 插件 plugins: [ +++ new MiniCssExtractPlugin({ filename: 'static/css/[name].[hash].css', chunkFilename: 'static/css/[name].[hash].css' }) ] }
運(yùn)行 webpack --config build/webpack.base.conf.js
三、配置熱加載、代理等開發(fā)環(huán)境
通過build/config.js來設(shè)置開發(fā)配置。如下注釋
const path = require('path') module.exports = { dev: { assetsSubDirectory: 'static', // 靜態(tài)文件目錄 assetsPublicPath: '/', // 相對文件路徑 proxyTable: {}, host: 'localhost', port: '8000', autoOpenBrowser: false, // 是否自動打開瀏覽器 errorOverlay: true, // 瀏覽器錯誤提示遮罩層 notifyOnErrors: true, // 編譯錯誤的時候通知提示,需要friendly-errors-webpack-plugin 配合 poll: false, useEslint: true, // 便宜使用eslint-loader模塊 showEslintErrorsInOverlay: false, // eslint瀏覽器錯誤提示遮罩層 devtool: 'cheap-module-eval-source-map', // Source Maps cssSourceMap: true, // css Source Maps cacheBusting: false, // vue debugg 提示 } }
在webpack.dev.conf.js
中,通過webpack-dev-server
插件來開啟熱重載服務(wù),同時配置自動補(bǔ)全css兼容代碼的插件,postcss-loader
運(yùn)行npm run dev
或者 yarn dev
就可以啟動服務(wù)了
四、配置打包環(huán)境
通過build/config.js
來設(shè)置開發(fā)配置。如下注釋
const path = require('path') module.exports = { +++ build: { // html模板 index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', // 生產(chǎn)環(huán)境的souce map productionSourceMap: false, devtool: '#source-map', // 開啟靜態(tài)文件的Gzip壓縮 // 如果是true 的話 需要 npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // 打包完成顯示包大小的狀態(tài)分析 // `npm run build --report` bundleAnalyzerReport: process.env.npm_config_report } }
運(yùn)行npm run build
或者 yarn build
就可以實(shí)現(xiàn)打包vue項(xiàng)目啦。
五、檢查版本,優(yōu)化打包輸出和Eslint設(shè)置
在check-version.js
中用 shelljs 模塊檢查時候有npm命令, semver模塊語義化版本號,然后在build.js合并webpack.prod.conf.js
的的配置,然后組在格式化輸出。
// 檢查時候有安裝npm命令 if (shell.which('npm')) { versionRequirements.push({ name: 'npm', currentVersion: exec('npm --version'), versionRequirement: packageConfig.engines.npm }) } // 格式化輸出 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n')
通過eslint-loader 來配置eslint的檢查,建立.eslintrc.js去設(shè)置規(guī)則
{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src')], exclude: /node_modules/, options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay } },
六、打包優(yōu)化
1、添加DllPlugin和DllReferencePlugin來打包優(yōu)化不變的庫,
2、通過cache-loader來做loader的緩存,
3、通過UglifyJsPlugin的parallel來開啟多線程打包
先運(yùn)行npm run dll
然后 npm run build
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- windows下vue-cli及webpack搭建安裝環(huán)境
- vue+node+webpack環(huán)境搭建教程
- 詳解webpack+angular2開發(fā)環(huán)境搭建
- 詳解基于webpack搭建react運(yùn)行環(huán)境
- webpack入門+react環(huán)境配置
- karma+webpack搭建vue單元測試環(huán)境的方法示例
- 詳解webpack與SPA實(shí)踐之開發(fā)環(huán)境搭建
- webpack 2.x配置reactjs基本開發(fā)環(huán)境詳解
- 淺談Webpack下多環(huán)境配置的思路
- 詳解webpack4多入口、多頁面項(xiàng)目構(gòu)建案例
- webpack4.x開發(fā)環(huán)境配置詳解
相關(guān)文章
vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案
我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標(biāo)簽可以跳轉(zhuǎn),但是一刷新就會自動跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10vue實(shí)現(xiàn)在v-html的html字符串中綁定事件
今天小編就為大家分享一篇vue實(shí)現(xiàn)在v-html的html字符串中綁定事件,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
日常業(yè)務(wù)開發(fā)中,form表單校驗(yàn)是一個很常見的問題,本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04uniapp微信小程序WebApi_openid、phone接口獲取代碼詳解
本文主要記錄了微信小程序接口調(diào)用的過程,首先查看uniapp文檔和微信API文檔,獲取openid和phone,然后通過uniapp實(shí)現(xiàn)獲取openid和電話號碼,但遇到了合法域名屏蔽的問題,最后通過將微信訪問遷移到后臺解決,需要的朋友可以參考下2024-10-10