Vue工程模板文件 webpack打包

const path = require(‘path‘);//处理共用、通用的jsconst 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‘ ???????} ???}};

//处理共用、通用的jsconst 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 ???????}) ???]});

//处理共用、通用的jsconst 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 ???????}) ???]});

{ ?"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"}