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: [{//加载与编译vue文件loader: 'vue-loader',options: {loaders: {less: ExtractTextPlugin.extract({//minimize 启用压缩use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],//加载vue文件中的样式文件fallback: 'vue-style-loader'}),css: ExtractTextPlugin.extract({use: ['css-loader', 'autoprefixer-loader', 'less-loader'],//加载vue文件中的样式文件fallback: 'vue-style-loader'})}}}]},//iview文件夹下的js编译处理
            {test: /iview\/.*?js$/,//es6编译为es5loader: 'babel-loader'},//js编译处理
            {test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},//css处理
            {test: /\.css$/,use: ExtractTextPlugin.extract({//css-loader加载css样式文件,minimize 启用压缩use: ['css-loader?minimize', 'autoprefixer-loader'],//将样式表直接插入到页面的<style>内fallback: 'style-loader'})},//less处理
            {test: /\.less/,use: ExtractTextPlugin.extract({//less-loader编译与加载less文件(需要依赖less库)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"
}

(4)babel配置.babelrc文件

{"presets": ["es2015"],"plugins": ["transform-runtime"],"comments": false
}

转载于:https://www.cnblogs.com/mengfangui/p/8117060.html

Vue工程模板文件 webpack打包相关推荐

  1. vue 不生效 打包 样式_解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...

  2. vue项目使用webpack打包后,图片不显示

    1.问题及解决原因 vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来. 查看控制台也没有报错. 错误原因是Webpack打包之 ...

  3. 在vue项目中webpack打包后字体不生效

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...

  4. HTML加载gz文件,webpack打包的.gz文件,怎么在浏览器页面中引用

    做的是 react 项目,在 webpack 中利用压缩插件 compression-webpack-plugin 将 main.bundle.js 压缩成了 main.bundle.js.gz ,看 ...

  5. vue项目启动webpack打包sass报错

    报错截图展示 报错代码提示 ERROR Failed to compile with 1 errorerror in ./src/styles/index.scssSyntax Error: Erro ...

  6. webpack打包css image,webpack 打包CSS 引入图片

    加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...

  7. alive的不生效 keep vue_vue解决使用webpack打包后keep-alive不生效的方法

    问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下 ...

  8. 本地运行vue dist文件

    vue打包命令 npm run build 运行这个命令会在目录中生成一个dist文件夹 在服务器部署vue项目只需要把这个文件夹给后台就可以了 但是打包之后我们需要在本地先自测一下,下面就是踩过的一 ...

  9. vue webpack打包入口文件是哪个_Vue项目起步

    一,安装nodejs软件(直接商城搜索安装即可). 二,配置npm npm install npm -g 三,配置webpack,在cmd中安装. npm install -g webpack npm ...

最新文章

  1. Open-E DSS V7 应用系列之六 构建软件iSCSI
  2. poj2002 poj3432 正方形个数 (hash,二分)
  3. ExtJS4.2:自定义主题 入门
  4. 以太坊知识教程------智能合约的5种设计模式
  5. jupyter-使用及设置密码
  6. 【移植Linux 3.4.2内核之四】修改内核代码支持YAFFS文件系统
  7. 我在工作中是这样使用Maven
  8. 用c 语言写出五子棋的代码,C语言案例:控制台版本的五子棋游戏【代码】
  9. JDBC连接池DBUtils使用
  10. 原生js实现多语言切换
  11. Fastjson源码阅读:缺陷静态检查(上)
  12. separated by semicolons
  13. 如何在word中一次性删除硬回车或软回车
  14. 基础优化 标题优化 上下架注意事项 流量少 转换率低 加购收藏 店铺层级 动销率 动态评分 当你弄清楚这些,自然流量的起来的重要因素
  15. 简单实用计划提醒便签软件 界面简洁功能一目了然
  16. 基站定位查询api使用接口
  17. 弗洛伊德算法思想理解
  18. java与c语言哪个好学_Java编程和C语言哪个好学
  19. swagger 怎么显示enum_dotnet core swagger filter 隐藏接口和显示枚举描述
  20. api c语言 播放视频,使用OpenCV播放视频文件(C/C++ API比较)

热门文章

  1. java开发怎么优化代码,代码优化,该如何处理
  2. 从零开始学java 框架_从零开始学 Java - 搭建 Spring MVC 框架
  3. python dataframe分组求和,pandas datafram中按特定月份分组和求和值
  4. c++ 标准库类型string
  5. 计算机中丢失msc,mscvr120.dll32位/64位版_修复计算机中丢失msvcr120.dll
  6. java.rmi.server.port_java.rmi.server.ExportException: internal error: ObjID already in use报错处理...
  7. kibana 查看索引库中文档个数_百度索引量是什么意思?和百度收录量的区别。...
  8. mysql8添加索引_MySQL8.0新特性-新的索引方式
  9. java hash取余_为什么Java的hash表的长度一直是2的指数次幂?为什么这个(hash(h-1)=hash%h)位运算公式等价于取余运算?...
  10. 如何在Node.js的httpServer中接收前端发送的arraybuffer数据