如何用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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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 addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
JS实现放大镜效果
2020/09/21 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
详解Python 循环嵌套
2020/07/09 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
销售行业个人求职自荐信
2013/09/25 职场文书
面料业务员岗位职责
2013/12/26 职场文书
校运会广播稿100字
2014/01/27 职场文书
应届生找工作求职信
2014/06/24 职场文书
基层党员对照检查材料
2014/08/25 职场文书
小学生教师节广播稿
2015/08/19 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书