1、github
Github address:/MengFangui/VueProjectTemplate
2. Webpack configuration
(1) Basic configuration
const path = require('path');
// Handle common and common jsconst webpack = require('webpack');
//CSS packaged separatelyconst ExtractTextPlugin = require('extract-text-webpack-plugin');
= {
//Entry file entry: {
main: './src/main',
vendors: './src/vendors'
},
output: {
path: (__dirname, './dist')
},
module: {
rules: [
//Vue single file processing {
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: {
loaders: {
less: ({
//minimize Enable compression use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
fallback: 'vue-style-loader'
}),
css: ({
use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
fallback: 'vue-style-loader'
})
}
}
}]
},
//JS compilation processing in iview folder {
test: /iview\/.*?js$/,
loader: 'babel-loader'
},
//js compilation processing {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
//css processing {
test: /\.css$/,
use: ({
//minimize Enable compression use: ['css-loader?minimize', 'autoprefixer-loader'],
fallback: 'style-loader'
})
},
//less processing {
test: /\.less/,
use: ({
use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],
fallback: 'style-loader'
})
},
//Picture processing {
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=1024'
},
//Realize resource reuse {
test: /\.(html|tpl)$/,
loader: 'html-loader'
}
]
},
resolve: {
//Automatically expand the file suffix name, which means that our require module can omit and not write suffix name extensions: ['.js', '.vue'],
//Module alias definition is convenient for subsequent reference to alias directly, without writing too long addresses alias: {
'vue': 'vue/dist/'
}
}
};
(2) Development environment configuration
// Handle common and common jsconst webpack = require('webpack');
//Processing html templateconst HtmlWebpackPlugin = require('html-webpack-plugin');
//CSS packaged separatelyconst ExtractTextPlugin = require('extract-text-webpack-plugin');
//Merge configurationconst merge = require('webpack-merge');
const webpackBaseConfig = require('./');
//The fs module is used to read and write system files and directoriesconst fs = require('fs');
//Before compilation, use node to generate a file to indicate whether it is currently developing or production (production)('./src/config/', 'w', function(err, fd) {
const buf = 'export default "development";';
(fd, buf, 0, , 0, function(err, written, buffer) {});
});
= merge(webpackBaseConfig, {
//Create a sourcemap file while packaging the code and add //# souceURL, the comment will tell the JS engine the original file location devtool: '#source-map', output: {
//Online environment path publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[name].'
},
plugins: [
//CSS packaged separately new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
//General module compilation new ({
//The block name of the extracted common block (chunk) name: 'vendors',
// Generated common file name filename: ''
}),
new HtmlWebpackPlugin({
//Output file filename: '../',
//Template file template: './src/template/',
//Do not insert the generated js file, just simply generate an html file inject: false
})
]
});
(3) Online environment configuration
// Handle common and common jsconst webpack = require('webpack');
//Processing html templateconst HtmlWebpackPlugin = require('html-webpack-plugin');
//CSS packaged separatelyconst ExtractTextPlugin = require('extract-text-webpack-plugin');
//Merge configurationconst merge = require('webpack-merge');
const webpackBaseConfig = require('./');
//The fs module is used to read and write system files and directoriesconst fs = require('fs');
//Before compilation, use node to generate a file to indicate whether it is currently developing or production (production)('./src/config/', 'w', function (err, fd) {
const buf = 'export default "production";';
(fd, buf, 0, , 0, function (err, written, buffer){});
});
= merge(webpackBaseConfig, {
output: {
//Online environment path publicPath: 'dist/',
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].'
},
plugins: [
new ExtractTextPlugin({
//CSS packaged separately filename: '[name].[hash].css',
allChunks: true
}),
//General module compilation new ({
//The block name of the extracted common block (chunk) name: 'vendors',
// Generated common file name filename: 'vendors.[hash].js'
}),
new ({
'': {
NODE_ENV: '"production"'
}
}),
//js compression new ({
compress: {
warnings: false
}
}),
new HtmlWebpackPlugin({
//Output file filename: '../index_prod.html',
//Template file template: './src/template/',
//Do not insert the generated js file, just simply generate an html file inject: false
})
]
});
(4) File
{
"name": "iview-project",
"version": "2.1.0",
"description": "A base project with Vue.js2、Vue-Router、webpack2 and with iView2.",
"main": "",
"scripts": {
"init": "webpack --progress --config ",
"dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config ",
"build": "webpack --progress --hide-modules --config "
},
"repository": {
"type": "git",
"url": "git+/iview/"
},
"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": "/iview/iview-project/issues"
},
"homepage": ""
}
ps: Let’s take a look at how to use webpack to package vue projects?
1. Install nodejs: Use webpack to package npm. npm (node package manager) is the nodejs package manager, used for node plug-in management (including installation, uninstallation, management dependencies, etc.), so you need to download and install nodejs first, and use npm -v after the installation is completed to see if the installation is completed;
2. Install cnpm (this step is not necessary): Because the npm installation plug-in is downloaded from foreign websites, it is easy to cause abnormalities due to network influence. cnpm is a complete mirror. You can use this instead of the official version (read-only). The synchronization frequency is currently 10 minutes every time to ensure that you try to synchronize with the official service. Use npm install -g cnpm --registry= to install, and then you can use cnpm instead of npm;
3. Install vue-cli scaffolding globally, npm install -g vue-cli (install to the current directory without adding -g; install to the node directory of the system). After the installation is completed, use vue -V to view;
4. Create a new project based on webpack template (download template); use vue init webpack my-project (project folder name); then perform a series of settings, and download a vue template;
5. cd my-project enters the project folder; use the npm install command to install the dependencies in the file, and download relevant components based on the dependencies of the front-end project, which exists in the node_modules folder of the project directory;
6. After installing the node_modules dependency, use the command npm run dev to start the project (dev is configured in the file).
Summarize
The above is the webpack package of the Vue project template file introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!