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


Posted in Javascript onJune 20, 2018

一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置,

一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤。

github 地址

clone project

git clone git@github.com:naihe138/nvue.git

install

npm 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
}) + '\n\n')

通过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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.ui.draggable中文文档
Nov 24 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 #Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 #Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 #Javascript
JS中call和apply函数用法实例分析
Jun 20 #Javascript
微信小程序模拟cookie的实现
Jun 20 #Javascript
JS伪继承prototype实现方法示例
Jun 20 #Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 #jQuery
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
浅谈Python的垃圾回收机制
2016/12/17 Python
python使用turtle绘制分形树
2018/06/22 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
幼儿运动会邀请函
2014/01/17 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
2014年会计工作总结
2014/11/27 职场文书
拾金不昧感谢信
2015/01/21 职场文书
施工员岗位职责范本
2015/04/11 职场文书