如何用webpack4带你实现一个vue的打包的项目
一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置, 一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤。 github 地址 clone project install 一、初始化项目初始化项目,用vue-loader来打包.vue文件,html-webpack-plugin插件来导出html文件。 第一步我们很简单,就利用vue-loader 和 babel-loader 是把.vue文件打包出来,总共才40多行代码,看build/webpack.base.conf.js文件注释就看的懂。+++表示有省略的代码 运行 二、打包css和图片等资源这里打包css以sass 为例,用到了 运行 三、配置热加载、代理等开发环境通过build/config.js来设置开发配置。如下注释 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 提示 } } 在 运行 四、配置打包环境通过 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 } } 运行 五、检查版本,优化打包输出和Eslint设置在 // 格式化输出
process.stdout.write(stats.toString({ colors: true,modules: false,children: false,chunks: false,chunkModules: false }) + 'nn') 通过eslint-loader 来配置eslint的检查,建立.eslintrc.js去设置规则 六、打包优化1、添加DllPlugin和DllReferencePlugin来打包优化不变的库, 2、通过cache-loader来做loader的缓存, 3、通过UglifyJsPlugin的parallel来开启多线程打包 先运行 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |