如何用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之十二 删除事件核心方法
Jul 31 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
webpack打包多页面的方法
Nov 30 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
运用js实现图层拖拽的功能
May 24 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去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
php 图片上传类代码
2009/07/17 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
详解Python验证码识别
2016/01/25 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python多线程抽象编程模型详解
2019/03/20 Python
提升Python程序性能的7个习惯
2019/04/14 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python中可以声明变量类型吗
2020/06/18 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
医院门卫岗位职责
2013/12/30 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
汇报材料怎么写
2014/12/30 职场文书
挂靠协议书
2015/01/27 职场文书
停电通知范文
2015/04/16 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle