Vue工程模板文件 webpack打包

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
}