摘要:一個用打包的的項目,參照的配置,一步一步帶你實現一個的打包的項目,每一個對應一個步驟。如下注釋模板生產環境的開啟靜態文件的壓縮如果是的話需要打包完成顯示包大小的狀態分析運行或者就可以實現打包項目啦。
一個用webpack4打包的vue 的項目,參照vue-cli的webpack配置,
一步一步帶你實現一個vue的打包的項目,每一個commit對應一個步驟。
github 地址 clone projectgit clone git@github.com:naihe138/nvue.git
installnpm install or yarn
一、初始化項目初始化項目,用vue-loader來打包.vue文件,html-webpack-plugin插件來導出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") } ] } +++ }
運行 webpack --config build/webpack.base.conf.js
二、打包css和圖片等資源這里打包css以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" }) ] }
運行 webpack --config build/webpack.base.conf.js
三、配置熱加載、代理等開發環境通過build/config.js來設置開發配置。如下注釋
const path = require("path") module.exports = { dev: { assetsSubDirectory: "static", // 靜態文件目錄 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 插件來開啟熱重載服務,同時配置自動補全css兼容代碼的插件,postcss-loader
運行npm run dev 或者 yarn dev 就可以啟動服務了
四、配置打包環境通過build/config.js來設置開發配置。如下注釋
const path = require("path") module.exports = { +++ build: { // html模板 index: path.resolve(__dirname, "../dist/index.html"), // Paths assetsRoot: path.resolve(__dirname, "../dist"), assetsSubDirectory: "static", assetsPublicPath: "/", // 生產環境的souce map productionSourceMap: false, devtool: "#source-map", // 開啟靜態文件的Gzip壓縮 // 如果是true 的話 需要 npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ["js", "css"], // 打包完成顯示包大小的狀態分析 // `npm run build --report` bundleAnalyzerReport: process.env.npm_config_report } }
運行npm run build 或者 yarn build 就可以實現打包vue項目啦。
五、檢查版本,優化打包輸出和Eslint設置在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 }) + " ")
通過eslint-loader 來配置eslint的檢查,建立.eslintrc.js去設置規則
{ test: /.(js|vue)$/, loader: "eslint-loader", enforce: "pre", include: [resolve("src")], exclude: /node_modules/, options: { formatter: require("eslint-friendly-formatter"), emitWarning: !config.dev.showEslintErrorsInOverlay } },六、打包優化
1、添加DllPlugin和DllReferencePlugin來打包優化不變的庫,
2、通過cache-loader來做loader的緩存,
3、通過UglifyJsPlugin的parallel來開啟多線程打包
先運行npm run dll 然后 npm run build
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95549.html
摘要:根據依賴關系,按照配置文件把模塊函數分組打包成若干個。會隨著自身的的修改,而發生變化。只需要在命令行運行時帶上參數就搞定一些插件的廢除和替換廢棄了頂替者用屬性變化壓縮優化代碼分割,下面詳解還有一些新的插件,。 1. 前端工程化項目打包歷史 前端工程化之前的時代略過 1. 半自動執行腳本來壓縮合并文件 自從xmlhttprequest被挖掘出來,網頁能夠和服務端通訊,js能做的事越來越多...
摘要:根據依賴關系,按照配置文件把模塊函數分組打包成若干個。會隨著自身的的修改,而發生變化。只需要在命令行運行時帶上參數就搞定一些插件的廢除和替換廢棄了頂替者用屬性變化壓縮優化代碼分割,下面詳解還有一些新的插件,。 1. 前端工程化項目打包歷史 前端工程化之前的時代略過 1. 半自動執行腳本來壓縮合并文件 自從xmlhttprequest被挖掘出來,網頁能夠和服務端通訊,js能做的事越來越多...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 2380·2021-10-09 09:41
閱讀 3172·2021-09-26 09:46
閱讀 835·2021-09-03 10:34
閱讀 3150·2021-08-11 11:22
閱讀 3364·2019-08-30 14:12
閱讀 710·2019-08-26 11:34
閱讀 3343·2019-08-26 11:00
閱讀 1749·2019-08-26 10:26