Vue project template file Webpack packaging

1. GitHub

GitHub Address: Https://github.com/MengFangui/VueProjectTemplate

2. Webpack Configuration

(1) basic configuration Webpack.base.config.js

Const PATH = require (' path ');//working with common, common JSConst WEBPACK = require (' Webpack ');//CSS Packaged separatelyConst Extracttextplugin = require (' Extract-text-webpack-plugin '); Module.exports= {    //Entry Fileentry: {main:'./src/main ', Vendors:'./src/vendors '}, Output: {Path:path.join (__dirname,'./dist ')}, module: {rules: [//Vue Single File processing{test:/\.vue$/, use: [{loader:' Vue-loader ', Options: {loaders: {LESS:EXTRACTTEXTPLUGIN.E Xtract ({//Minimize Enable compressionUse: [' 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 '                            })                        }                    }                }]            }, //JS compilation processing under the IView folder{test:/iview\/.*?js$/, Loader:' Babel-loader '            },            //JS Compilation processing{test:/\.js$/, Loader:' Babel-loader ', exclude:/node_modules/            },            //CSS Processing{test:/\.css$/, Use:ExtractTextPlugin.extract ({//Minimize Enable compressionUse: [' css-loader?minimize ', ' Autoprefixer-loader '], fallback:' Style-loader '                })            },            //Less processing{test:/\.less/, Use:ExtractTextPlugin.extract ({use: [' Css-loader?minimize ', ' autoprefixer-loader ', ' Less-loader '], fallback:' Style-loader '                })            },            //image Processing{test:/\. (Gif|jpg|png|woff|svg|eot|ttf) \??. *$/, Loader:' url-loader?limit=1024 '            },            //Implement resource Reuse{test:/\. (HTML|TPL) $/, Loader:' Html-loader '}]}, resolve: {//automatic extension of the file suffix means that we can omit the suffix name from the Require moduleExtensions: ['. js ', '. Vue '],        //module alias definition, easy to follow the direct reference alias, no need to write long addressalias: {' Vue ': ' Vue/dist/vue.esm.js '        }    }};

(2) Development environment configuration webpack.dev.config.js

//working with common, common JSConst WEBPACK = require (' Webpack ');//working with HTML templatesConst Htmlwebpackplugin = require (' Html-webpack-plugin ');//CSS Packaged separatelyConst Extracttextplugin = require (' Extract-text-webpack-plugin ');//Merge ConfigurationConst MERGE = require (' Webpack-merge '); Const Webpackbaseconfig= require ('./webpack.base.config.js '));//FS module for read and write operation of system files and directoriesConst FS = require (' FS ');//generate a Env.js file with node before compiling to indicate whether the current development (development) or production environment (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, {//a Sourcemap file is generated at the same time that the code is packaged, and a//# Souceurl is added at the end of the packaged file, which tells the JS engine the original file locationDevtool: ' #source-map ', output: {//on-line environment pathPublicpath: '/dist/', FileName:' [Name].js ', Chunkfilename:' [Name].chunk.js '}, plugins: [//CSS Packaged separately        Newextracttextplugin ({filename:' [Name].css ', Allchunks:true        }),        //Generic Module Compilation        NewWebpack.optimize.CommonsChunkPlugin ({//The block name of the extracted public block (chunk)Name: ' Vendors ',            //generated generic file nameFileName: ' Vendors.js '        }),        NewHtmlwebpackplugin ({//Output FileFileName: '. /index.html ',            //template fileTemplate: './src/template/index.ejs ',            //do not insert the generated JS file, simply generate an HTML fileInjectfalse        })    ]});

(3) on-line environment configuration webpack.prod.config.js

//working with common, common JSConst WEBPACK = require (' Webpack ');//working with HTML templatesConst Htmlwebpackplugin = require (' Html-webpack-plugin ');//CSS Packaged separatelyConst Extracttextplugin = require (' Extract-text-webpack-plugin ');//Merge ConfigurationConst MERGE = require (' Webpack-merge '); Const Webpackbaseconfig= require ('./webpack.base.config.js '));//FS module for read and write operation of system files and directoriesConst FS = require (' FS ');//generate a Env.js file with node before compiling to indicate whether the current development (development) or production environment (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: {//on-line environment pathPublicpath: ' dist/', FileName:' [name]. [Hash].js ', Chunkfilename:' [name]. [Hash].chunk.js '}, plugins: [NewExtracttextplugin ({//CSS Packaged separatelyFileName: ' [name]. [Hash].css ', Allchunks:true        }),        //Generic Module Compilation        NewWebpack.optimize.CommonsChunkPlugin ({//The block name of the extracted public block (chunk)Name: ' Vendors ',            //generated generic file nameFileName: ' Vendors. [Hash].js '        }),        NewWebpack. Defineplugin ({' Process.env ': {node_env:' "Production" '            }        }),        //JS Compression        NewWebpack.optimize.UglifyJsPlugin ({compress: {warnings:false            }        }),                NewHtmlwebpackplugin ({//Output FileFileName: '. /index_prod.html ',            //template fileTemplate: './src/template/index.ejs ',            //do not insert the generated JS file, simply generate an HTML fileInjectfalse        })    ]});

(4) Package.json file

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

Vue project template file Webpack packaging