Vue工程模板文件 webpack打包配置方法


Posted in Javascript onDecember 26, 2017

1、github

github地址:https://github.com/MengFangui/VueProjectTemplate

2、webpack配置

(1)基础配置webpack.base.config.js

const path = require('path');
//处理共用、通用的js
const webpack = require('webpack');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
 //入口文件
 entry: {
  main: './src/main',
  vendors: './src/vendors'
 },
 output: {
  path: path.join(__dirname, './dist')
 },
 module: {
  rules: [
   //vue单文件处理
   {
    test: /\.vue$/,
    use: [{
     loader: 'vue-loader',
     options: {
      loaders: {
       less: ExtractTextPlugin.extract({
        //minimize 启用压缩
        use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
        fallback: 'vue-style-loader'
       }),
       css: ExtractTextPlugin.extract({
        use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
        fallback: 'vue-style-loader'
       })
      }
     }
    }]
   },
   //iview文件夹下的js编译处理
   {
    test: /iview\/.*?js$/,
    loader: 'babel-loader'
   },
   //js编译处理
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
   },
   //css处理
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     //minimize 启用压缩
     use: ['css-loader?minimize', 'autoprefixer-loader'],
     fallback: 'style-loader'
    })
   },
   //less处理
   {
    test: /\.less/,
    use: ExtractTextPlugin.extract({
     use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
     fallback: 'style-loader'
    })
   },
   //图片处理
   {
    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
    loader: 'url-loader?limit=1024'
   },
   //实现资源复用
   {
    test: /\.(html|tpl)$/,
    loader: 'html-loader'
   }
  ]
 },
 resolve: {
  //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
  extensions: ['.js', '.vue'],
  //模块别名定义,方便后续直接引用别名,无须多写长长的地址
  alias: {
   'vue': 'vue/dist/vue.esm.js'
  }
 }
};

(2)开发环境配置webpack.dev.config.js

//处理共用、通用的js
const webpack = require('webpack');
//处理html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//合并配置
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
//fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
//编译前用node生成一个env.js的文件,用来标明当前是开发(development)还是生产环境(production)
fs.open('./src/config/env.js', 'w', function(err, fd) {
 const buf = 'export default "development";';
 fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});
});
module.exports = merge(webpackBaseConfig, {
 //打包代码的同时生成一个sourcemap文件,并在打包文件的末尾添加//# souceURL,注释会告诉JS引擎原始文件位置
 devtool: '#source-map',
 output: {
  //线上环境路径
  publicPath: '/dist/',
  filename: '[name].js',
  chunkFilename: '[name].chunk.js'
 },
 plugins: [
  //css单独打包
  new ExtractTextPlugin({
   filename: '[name].css',
   allChunks: true
  }),
  //通用模块编译
  new webpack.optimize.CommonsChunkPlugin({
   //提取的公共块的块名称(chunk)
   name: 'vendors',
   //生成的通用的文件名
   filename: 'vendors.js'
  }),
  new HtmlWebpackPlugin({
   //输出文件
   filename: '../index.html',
   //模板文件
   template: './src/template/index.ejs',
   //不插入生成的 js 文件,只是单纯的生成一个 html 文件
   inject: false
  })
 ]
});

(3)线上环境配置webpack.prod.config.js

//处理共用、通用的js
const webpack = require('webpack');
//处理html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css单独打包
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//合并配置
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
//fs模块用于对系统文件及目录进行读写操作
const fs = require('fs');
//编译前用node生成一个env.js的文件,用来标明当前是开发(development)还是生产环境(production)
fs.open('./src/config/env.js', 'w', function (err, fd) {
 const buf = 'export default "production";';
 fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
});
module.exports = merge(webpackBaseConfig, {
 output: {
  //线上环境路径
  publicPath: 'dist/',
  filename: '[name].[hash].js',
  chunkFilename: '[name].[hash].chunk.js'
 },
 plugins: [
  new ExtractTextPlugin({
   //css单独打包
   filename: '[name].[hash].css',
   allChunks: true
  }),
  //通用模块编译
  new webpack.optimize.CommonsChunkPlugin({
   //提取的公共块的块名称(chunk)
   name: 'vendors',
   //生成的通用的文件名
   filename: 'vendors.[hash].js'
  }),
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  //js压缩
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  }),
  new HtmlWebpackPlugin({
   //输出文件
   filename: '../index_prod.html',
   //模板文件
   template: './src/template/index.ejs',
   //不插入生成的 js 文件,只是单纯的生成一个 html 文件
   inject: false
  })
 ]
});

(4)package.json文件

{
 "name": "iview-project",
 "version": "2.1.0",
 "description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.",
 "main": "index.js",
 "scripts": {
 "init": "webpack --progress --config webpack.dev.config.js",
 "dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
 "build": "webpack --progress --hide-modules --config webpack.prod.config.js"
 },
 "repository": {
 "type": "git",
 "url": "git+https://github.com/iview/iview-project.git"
 },
 "author": "Aresn",
 "license": "MIT",
 "dependencies": {
 "vue": "^2.2.6",
 "vue-router": "^2.2.1",
 "iview": "^2.0.0-rc.8"
 },
 "devDependencies": {
 "autoprefixer-loader": "^2.0.0",
 "babel": "^6.23.0",
 "babel-core": "^6.23.1",
 "babel-loader": "^6.2.4",
 "babel-plugin-transform-runtime": "^6.12.0",
 "babel-preset-es2015": "^6.9.0",
 "babel-runtime": "^6.11.6",
 "css-loader": "^0.23.1",
 "extract-text-webpack-plugin": "^2.0.0",
 "file-loader": "^0.8.5",
 "html-loader": "^0.3.0",
 "html-webpack-plugin": "^2.28.0",
 "less": "^2.7.1",
 "less-loader": "^2.2.3",
 "style-loader": "^0.13.1",
 "url-loader": "^0.5.7",
 "vue-hot-reload-api": "^1.3.3",
 "vue-html-loader": "^1.2.3",
 "vue-loader": "^11.0.0",
 "vue-style-loader": "^1.0.0",
 "vue-template-compiler": "^2.2.1",
 "webpack": "^2.2.1",
 "webpack-dev-server": "^2.4.1",
 "webpack-merge": "^3.0.0"
 },
 "bugs": {
 "url": "https://github.com/iview/iview-project/issues"
 },
 "homepage": "https://www.iviewui.com"
}

ps:下面看下如何使用webpack打包vue项目?

1、安装nodejs:使用webpack打包需要用到npm,npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等),所以需要先下载安装nodejs,安装完成后使用npm -v查看是否安装完成;

2、安装cnpm(此步骤为非必须):因为npm安装插件是从国外的网站上下载的,由于网络影响,很容易就出现异常,cnpm是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 使用npm install -g cnpm --registry=https://registry.npm.taobao.org安装,之后可以使用cnpm来代替npm;

3、全局安装vue-cli脚手架,npm install -g vue-cli (不加-g安装到当前目录;加-g安装到系统的node目录),安装完成后使用vue -V查看;

4、创建一个基于webpack模板的新项目(下载模板);使用 vue init webpack my-project(项目文件夹名);接下来进行一系列的设置后,就下载好了一个vue模板了;

5、cd my-project 进入项目文件夹;使用npm install命令安装package.json文件里的依赖,会根据前端项目的依赖关系下载好相关的组件,存在项目目录的node_modules文件夹下;

6、安装node_modules依赖后,使用命令 npm run dev 启动项目(dev配置在package.json文件中)。

总结

以上所述是小编给大家介绍的Vue工程模板文件 webpack打包,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 #Javascript
Webpack实战加载SVG的方法
Dec 26 #Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 #Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 #Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 #Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 #Javascript
You might like
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php邮件发送的两种方式
2020/04/28 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
项目经理岗位职责
2013/11/11 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
基于docker安装zabbix的详细教程
2022/06/05 Servers
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers