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打包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。