如何用webpack4带你实现一个vue的打包的项目

前端之家收集整理的这篇文章主要介绍了如何用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文件注释就看的懂。+++表示有省略的代码

运行 webpack --config build/webpack.base.conf.js

二、打包css和图片等资源

这里打包css以sass 为例,用到了mini-css-extract-plugin插件提取css,用url-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来设置开发配置。如下注释

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来设置开发配置。如下注释

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的的配置,然后组在格式化输出

// 格式化输出
process.stdout.write(stats.toString({
colors: true,modules: false,children: false,chunks: false,chunkModules: false
}) + '\n\n')

通过eslint-loader 来配置eslint的检查,建立.eslintrc.js去设置规则

六、打包优化

1、添加DllPlugin和DllReferencePlugin来打包优化不变的库, 2、通过cache-loader来做loader的缓存, 3、通过UglifyJsPlugin的parallel来开启多线程打包

先运行npm run dll 然后 npm run build

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/31852.html

猜你在找的Vue相关文章