├── .browserslistrc ├── .gitignore ├── README.md ├── babel.config.js ├── build ├── webpack.config.js ├── webpack.dev.js └── webpack.prod.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets ├── logo.png └── styles │ └── var.scss ├── components └── HelloWorld.vue ├── main.js ├── router └── index.js ├── store └── index.js └── views ├── About.vue └── Home.vue /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-webpack-template 2 | 3 | ![](https://img.shields.io/badge/license-MIT-0.svg) 4 | ![](https://img.shields.io/badge/download-2M-0.svg) 5 | ![](https://img.shields.io/badge/language-zh-0.svg) 6 | ![](https://img.shields.io/badge/platform-win/mac-0.svg) 7 | ![](https://img.shields.io/badge/node@latest->6.0.0-0.svg) 8 | 9 | ## 相关文章 10 | 1. [面试官：自己搭建过vue开发环境吗？](https://juejin.im/post/5cc55c336fb9a032086dd701) 11 | 12 | ## 项目 13 | ### 安装依赖 14 | ``` 15 | npm install 16 | ``` 17 | 18 | ### development 模式启动 19 | ``` 20 | npm run serve 21 | ``` 22 | 23 | ### production 模式构建 24 | ``` 25 | npm run build 26 | ``` 27 | ### production 模式打包体积分析 28 | ``` 29 | npm run analyze 30 | ``` 31 | ### eslint 检查 32 | ``` 33 | npm run lint 34 | ``` 35 | 36 | ## 欢迎关注 37 | 欢迎关注公众号“**码上开发**”，每天分享最新技术资讯 38 | 39 | ![image](https://user-gold-cdn.xitu.io/2018/12/24/167ddc2c7f13cdf5?w=430&h=430&f=png&s=54797) 40 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | useBuiltIns: "usage" 7 | } 8 | ] 9 | ], 10 | plugins: [ 11 | '@babel/plugin-syntax-dynamic-import' 12 | ] 13 | } -------------------------------------------------------------------------------- /build/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | module.exports = { 6 | entry: { 7 | // 配置入口文件 8 | main: path.resolve(__dirname, '../src/main.js') 9 | }, 10 | output: { 11 | // 配置打包文件输出的目录 12 | path: path.resolve(__dirname, '../dist'), 13 | // 生成的 js 文件名称 14 | filename: 'js/[name].[hash:8].js', 15 | // 生成的 chunk 名称 16 | chunkFilename: 'js/[name].[hash:8].js', 17 | // 资源引用的路径 18 | publicPath: '/' 19 | }, 20 | devServer: { 21 | hot: true, 22 | port: 3000, 23 | contentBase: './dist', 24 | open: true, 25 | }, 26 | resolve: { 27 | alias: { 28 | vue$: 'vue/dist/vue.runtime.esm.js' 29 | }, 30 | extensions: [ 31 | '.js', 32 | '.vue' 33 | ] 34 | }, 35 | module: { 36 | rules: [ 37 | { 38 | test: /\.vue$/, 39 | exclude: /node_modules/, 40 | use: [ 41 | { 42 | loader: 'cache-loader' 43 | }, 44 | { 45 | loader: 'thread-loader' 46 | }, 47 | { 48 | loader: 'vue-loader', 49 | options: { 50 | compilerOptions: { 51 | preserveWhitespace: false 52 | }, 53 | } 54 | } 55 | ] 56 | }, 57 | { 58 | test: /\.jsx?$/, 59 | exclude: /node_modules/, 60 | use: [ 61 | { 62 | loader: 'cache-loader' 63 | }, 64 | { 65 | loader: 'thread-loader' 66 | }, 67 | { 68 | loader: 'babel-loader' 69 | } 70 | ] 71 | }, 72 | 73 | { 74 | test: /\.(jpe?g|png|gif)$/, 75 | use: [ 76 | { 77 | loader: 'url-loader', 78 | options: { 79 | limit: 4096, 80 | fallback: { 81 | loader: 'file-loader', 82 | options: { 83 | name: 'img/[name].[hash:8].[ext]' 84 | } 85 | } 86 | } 87 | } 88 | ] 89 | }, 90 | { 91 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 92 | use: [ 93 | { 94 | loader: 'url-loader', 95 | options: { 96 | limit: 4096, 97 | fallback: { 98 | loader: 'file-loader', 99 | options: { 100 | name: 'media/[name].[hash:8].[ext]' 101 | } 102 | } 103 | } 104 | } 105 | ] 106 | }, 107 | { 108 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, 109 | use: [ 110 | { 111 | loader: 'url-loader', 112 | options: { 113 | limit: 4096, 114 | fallback: { 115 | loader: 'file-loader', 116 | options: { 117 | name: 'fonts/[name].[hash:8].[ext]' 118 | } 119 | } 120 | } 121 | } 122 | ] 123 | }, 124 | ] 125 | }, 126 | plugins: [ 127 | new VueLoaderPlugin(), 128 | 129 | new HtmlWebpackPlugin({ 130 | template: path.resolve(__dirname, '../public/index.html') 131 | }), 132 | new webpack.NamedModulesPlugin(), 133 | new webpack.HotModuleReplacementPlugin(), 134 | ] 135 | } 136 | -------------------------------------------------------------------------------- /build/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const webpackConfig = require('./webpack.config') 3 | const webpack = require('webpack') 4 | module.exports = merge(webpackConfig, { 5 | mode: 'development', 6 | devtool: 'cheap-module-eval-source-map', 7 | module: { 8 | rules: [ 9 | { 10 | test: /\.css$/, 11 | use: [ 12 | { 13 | loader: 'style-loader' 14 | }, 15 | { 16 | loader: 'css-loader', 17 | } 18 | ] 19 | }, 20 | { 21 | test: /\.(scss|sass)$/, 22 | use: [ 23 | { 24 | loader: 'style-loader' 25 | }, 26 | { 27 | loader: 'css-loader', 28 | options: { 29 | importLoaders: 2 30 | } 31 | }, 32 | { 33 | loader: 'sass-loader', 34 | options: { 35 | implementation: require('dart-sass') 36 | } 37 | }, 38 | { 39 | loader: 'postcss-loader' 40 | } 41 | ] 42 | }, 43 | ] 44 | }, 45 | plugins: [ 46 | new webpack.DefinePlugin({ 47 | 'process.env': { 48 | NODE_ENV: JSON.stringify('development') 49 | } 50 | }), 51 | ] 52 | }) 53 | -------------------------------------------------------------------------------- /build/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const merge = require('webpack-merge') 3 | const webpack = require('webpack') 4 | const webpackConfig = require('./webpack.config') 5 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 6 | const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin'); 7 | const CleanWebpackPlugin = require('clean-webpack-plugin') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const BundleAnalyzerPlugin= require('webpack-bundle-analyzer').BundleAnalyzerPlugin 10 | module.exports = merge(webpackConfig, { 11 | mode: 'production', 12 | devtool: '#source-map', 13 | optimization: { 14 | splitChunks: { 15 | cacheGroups: { 16 | vendors: { 17 | name: 'chunk-vendors', 18 | test: /[\\\/]node_modules[\\\/]/, 19 | priority: -10, 20 | chunks: 'initial' 21 | }, 22 | common: { 23 | name: 'chunk-common', 24 | minChunks: 2, 25 | priority: -20, 26 | chunks: 'initial', 27 | reuseExistingChunk: true 28 | } 29 | } 30 | } 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.(scss|sass)$/, 36 | use: [ 37 | { 38 | loader: MiniCssExtractPlugin.loader 39 | }, 40 | { 41 | loader: 'css-loader', 42 | options: { 43 | importLoaders: 2 44 | } 45 | }, 46 | { 47 | loader: 'sass-loader', 48 | options: { 49 | implementation: require('dart-sass') 50 | } 51 | }, 52 | { 53 | loader: 'postcss-loader' 54 | } 55 | ] 56 | }, 57 | ] 58 | }, 59 | plugins: [ 60 | new webpack.DefinePlugin({ 61 | 'process.env': { 62 | NODE_ENV: 'production' 63 | } 64 | }), 65 | new MiniCssExtractPlugin({ 66 | filename: 'css/[name].[contenthash:8].css', 67 | chunkFilename: 'css/[name].[contenthash:8].css' 68 | }), 69 | new OptimizeCssnanoPlugin({ 70 | sourceMap: true, 71 | cssnanoOptions: { 72 | preset: [ 73 | 'default', 74 | { 75 | mergeLonghand: false, 76 | cssDeclarationSorter: false 77 | } 78 | ] 79 | } 80 | }), 81 | new CopyWebpackPlugin([ 82 | { 83 | from: path.resolve(__dirname, '../public'), 84 | to: path.resolve(__dirname, '../dist') 85 | } 86 | ]), 87 | new CleanWebpackPlugin(), 88 | new BundleAnalyzerPlugin({ 89 | analyzerMode: 'static' 90 | }) 91 | ] 92 | }) 93 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-vue", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "serve": "webpack-dev-server --config ./build/webpack.dev.js", 8 | "build": "webpack --config ./build/webpack.prod.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@babel/core": "^7.4.4", 14 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 15 | "@babel/preset-env": "^7.4.4", 16 | "@intervolga/optimize-cssnano-plugin": "^1.0.6", 17 | "autoprefixer": "^9.5.1", 18 | "babel-loader": "^8.0.5", 19 | "cache-loader": "^3.0.0", 20 | "clean-webpack-plugin": "^2.0.1", 21 | "copy-webpack-plugin": "^5.0.3", 22 | "css-loader": "^2.1.1", 23 | "dart-sass": "^1.19.0", 24 | "eslint": "^5.16.0", 25 | "eslint-config-standard": "^12.0.0", 26 | "eslint-loader": "^2.1.2", 27 | "file-loader": "^3.0.1", 28 | "html-webpack-plugin": "^3.2.0", 29 | "mini-css-extract-plugin": "^0.6.0", 30 | "postcss-loader": "^3.0.0", 31 | "preload-webpack-plugin": "^2.3.0", 32 | "sass-loader": "^7.1.0", 33 | "style-loader": "^0.23.1", 34 | "thread-loader": "^2.1.2", 35 | "url-loader": "^1.1.2", 36 | "vue-loader": "^15.7.0", 37 | "vue-template-compiler": "^2.6.10", 38 | "webpack": "^4.30.0", 39 | "webpack-bundle-analyzer": "^3.3.2", 40 | "webpack-cli": "^3.3.1", 41 | "webpack-dev-server": "^3.3.1", 42 | "webpack-merge": "^4.2.1" 43 | }, 44 | "dependencies": { 45 | "@babel/polyfill": "^7.4.4", 46 | "@babel/runtime-corejs2": "^7.4.4", 47 | "core-js": "^2.6.5", 48 | "vue": "^2.6.10", 49 | "vue-router": "^3.0.6", 50 | "vuex": "^3.1.1" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lentoo/vue-webpack-template/ccd52dfaf4b02cdacb9ae349e5b7a828b52af31c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 33 | 34 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lentoo/vue-webpack-template/ccd52dfaf4b02cdacb9ae349e5b7a828b52af31c/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/styles/var.scss: -------------------------------------------------------------------------------- 1 | $primary-color: #007fff; 2 | :root { 3 | --primary-color: $primary-color; 4 | } 5 | body { 6 | color: $primary-color; 7 | } 8 | #app { 9 | width: 100px; 10 | height: 100px; 11 | background: $primary-color; 12 | transform: translateX(100px); 13 | } -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 33 | 34 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | new Vue({ 6 | router, 7 | store, 8 | render: h => h(App) 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from "vue-router"; 3 | Vue.use(VueRouter) 4 | export default new VueRouter({ 5 | mode: 'hash', 6 | routes: [ 7 | { 8 | path: '/Home', 9 | component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue') 10 | // component: Home 11 | }, 12 | { 13 | path: '/About', 14 | component: () => import(/* webpackChunkName: "About" */ '../views/About.vue') 15 | // component: About 16 | }, 17 | { 18 | path: '*', 19 | redirect: '/Home' 20 | } 21 | ] 22 | }) -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | Vue.use(Vuex) 4 | const state = { 5 | counter: 0 6 | } 7 | const actions = { 8 | add: ({commit}) => { 9 | return commit('add') 10 | } 11 | } 12 | const mutations = { 13 | add: (state) => { 14 | state.counter++ 15 | } 16 | } 17 | const getters = { 18 | getCounter (state) { 19 | return state.counter 20 | } 21 | } 22 | export default new Vuex.Store({ 23 | state, 24 | actions, 25 | mutations, 26 | getters 27 | }) -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | --------------------------------------------------------------------------------