如何用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 相关文章推荐
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
javascript实现简单留言板案例
Feb 09 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函数和特点
2013/08/08 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python简单实现基数排序算法
2015/05/16 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python中的随机函数小结
2018/01/27 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
公证委托书模板
2014/04/03 职场文书
公司应聘自荐书
2014/06/14 职场文书
创先争优宣传标语
2014/10/08 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
协议书范文
2015/01/27 职场文书
财务部岗位职责
2015/02/03 职场文书
倡议书格式及范文
2015/04/29 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书