摘要:一个用打包的的项目,参照的配置,一步一步带你实现一个的打包的项目,每一个对应一个步骤。如下注释模板生产环境的开启静态文件的压缩如果是的话需要打包完成显示包大小的状态分析运行或者就可以实现打包项目啦。
一个用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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95549.html
摘要:根据依赖关系,按照配置文件把模块函数分组打包成若干个。会随着自身的的修改,而发生变化。只需要在命令行运行时带上参数就搞定一些插件的废除和替换废弃了顶替者用属性变化压缩优化代码分割,下面详解还有一些新的插件,。 1. 前端工程化项目打包历史 前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件 自从xmlhttprequest被挖掘出来,网页能够和服务端通讯,js能做的事越来越多...
摘要:根据依赖关系,按照配置文件把模块函数分组打包成若干个。会随着自身的的修改,而发生变化。只需要在命令行运行时带上参数就搞定一些插件的废除和替换废弃了顶替者用属性变化压缩优化代码分割,下面详解还有一些新的插件,。 1. 前端工程化项目打包历史 前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件 自从xmlhttprequest被挖掘出来,网页能够和服务端通讯,js能做的事越来越多...
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
阅读 2261·2021-10-09 09:41
阅读 3115·2021-09-26 09:46
阅读 804·2021-09-03 10:34
阅读 3116·2021-08-11 11:22
阅读 3336·2019-08-30 14:12
阅读 686·2019-08-26 11:34
阅读 3309·2019-08-26 11:00
阅读 1695·2019-08-26 10:26