├── .DS_Store
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── store
    │   └── index.js
    ├── main.js
    ├── App.vue
    ├── router
    │   └── index.js
    └── components
    │   └── HelloWorld.vue
├── webpack.dev.js
├── webpack.prod.js
├── LICENSE
├── package.json
├── .gitignore
└── webpack.config.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yjisme/vue-webpack/HEAD/.DS_Store


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["vue"],
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yjisme/vue-webpack/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yjisme/vue-webpack/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   mutations: {},
 9 |   actions: {},
10 |   modules: {}
11 | });
12 | 


--------------------------------------------------------------------------------
/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 | 
 6 | Vue.config.productionTip = false;
 7 | 
 8 | new Vue({
 9 |   router,
10 |   store,
11 |   render: h => h(App)
12 | }).$mount("#app");
13 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png" />
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from "@/components/HelloWorld.vue";
11 | 
12 | export default {
13 |   name: "Home",
14 |   components: {
15 |     HelloWorld,
16 |   },
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | const merge = require("webpack-merge");
 2 | const baseConfig = require("./webpack.config.js");
 3 | 
 4 | // webpack的开发环境配置，从基本配置中合并
 5 | // 合并是利用 webpack-merge 完成的： https://github.com/survivejs/webpack-merge
 6 | const devConfig = {
 7 |   mode: "development",
 8 |   devtool: "source-map",
 9 |   devServer: {
10 |     open: true,
11 |     port: 8080,
12 |     proxy: {
13 |       // 如果开发环境中有跨域问题，在这里配置代理
14 |     },
15 |     stats: "minimal",
16 |   },
17 | };
18 | module.exports = merge(baseConfig, devConfig);
19 | 


--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | const merge = require("webpack-merge");
 2 | const baseConfig = require("./webpack.config.js");
 3 | 
 4 | const prodConfig = {
 5 |   mode: "production",
 6 |   devtool: "none",
 7 |   optimization: {
 8 |     splitChunks: {
 9 |       //分包配置
10 |       chunks: "all",
11 |       cacheGroups: {
12 |         styles: {
13 |           minSize: 0,
14 |           test: /\.css$/,
15 |           minChunks: 2,
16 |         },
17 |       },
18 |     },
19 |   },
20 | };
21 | module.exports = merge(baseConfig, prodConfig);
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <title>vue project</title>
 8 |   </head>
 9 |   <body>
10 |     <noscript>
11 |       <strong>We're sorry but vue project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12 |     </noscript>
13 |     <div id="app"></div>
14 |     <!-- built files will be auto injected -->
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/">Home</router-link> |
 5 |       <router-link to="/about">About</router-link>
 6 |     </div>
 7 |     <router-view />
 8 |   </div>
 9 | </template>
10 | 
11 | <style>
12 | #app {
13 |   font-family: Avenir, Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 | }
19 | 
20 | #nav {
21 |   padding: 30px;
22 | }
23 | 
24 | #nav a {
25 |   font-weight: bold;
26 |   color: #2c3e50;
27 | }
28 | 
29 | #nav a.router-link-exact-active {
30 |   color: #42b983;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import Home from "../views/Home.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: "/",
10 |     name: "Home",
11 |     component: Home
12 |   },
13 |   {
14 |     path: "/about",
15 |     name: "About",
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () =>
20 |       import(/* webpackChunkName: "about" */ "../views/About.vue")
21 |   }
22 | ];
23 | 
24 | const router = new VueRouter({
25 |   mode: "history",
26 |   base: process.env.BASE_URL,
27 |   routes
28 | });
29 | 
30 | export default router;
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 bangbangji
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-webpack",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "serve": "webpack-dev-server --config webpack.dev.js",
 8 |     "build": "webpack --config webpack.prod.js"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/yjisme/vue-webpack.git"
13 |   },
14 |   "keywords": [],
15 |   "author": "",
16 |   "license": "ISC",
17 |   "bugs": {
18 |     "url": "https://github.com/yjisme/vue-webpack/issues"
19 |   },
20 |   "homepage": "https://github.com/yjisme/vue-webpack#readme",
21 |   "devDependencies": {
22 |     "@babel/core": "^7.10.2",
23 |     "babel-loader": "^8.1.0",
24 |     "babel-preset-vue": "^2.0.2",
25 |     "clean-webpack-plugin": "^3.0.0",
26 |     "copy-webpack-plugin": "^6.0.2",
27 |     "css-loader": "^3.5.3",
28 |     "file-loader": "^6.0.0",
29 |     "html-webpack-plugin": "^4.3.0",
30 |     "mini-css-extract-plugin": "^0.9.0",
31 |     "url-loader": "^4.1.0",
32 |     "vue-loader": "^15.9.2",
33 |     "vue-template-compiler": "^2.6.11",
34 |     "webpack": "^4.43.0",
35 |     "webpack-cli": "^3.3.11",
36 |     "webpack-dev-server": "^3.11.0",
37 |     "webpack-merge": "^4.2.2"
38 |   },
39 |   "dependencies": {
40 |     "vue": "^2.6.11",
41 |     "vue-router": "^3.3.2",
42 |     "vuex": "^3.4.0"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除 dist 目录
 3 | const CopyPlugin = require("copy-webpack-plugin"); // 处理静态资源
 4 | const HtmlWebpackPlugin = require("html-webpack-plugin"); // 处理模板页面
 5 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 打包css文件
 6 | const VueLoaderPlugin = require("vue-loader/lib/plugin");
 7 | // webpack的基本配置
 8 | module.exports = {
 9 |   entry: "./src/main.js", // 获取入口配置
10 |   output: {
11 |     filename: "js/[name].[chunkhash:5].js", // js 输出到 dist/js/xxx
12 |     publicPath: "/", // 公用的公共路径 /
13 |     path: path.resolve(__dirname, "dist"), // 输出目录为 dist
14 |   },
15 |   resolve: {
16 |     extensions: [".js", ".vue", ".json"],
17 |     alias: {
18 |       "@": path.resolve(__dirname, "src"), // 别名 @ = src目录
19 |       _: __dirname, // 别名 _ = 工程根目录
20 |     },
21 |   },
22 |   stats: {
23 |     colors: true, // 打包时使用不同的颜色区分信息
24 |     modules: false, // 打包时不显示具体模块信息
25 |     entrypoints: false, // 打包时不显示入口模块信息
26 |     children: false, // 打包时不显示子模块信息
27 |   },
28 |   module: {
29 |     rules: [
30 |       {
31 |         // 各种图片、字体文件，均交给 url-loader 处理
32 |         test: /\.(png)|(gif)|(jpg)|(svg)|(bmp)|(eot)|(woff)|(ttf)$/i,
33 |         use: [
34 |           {
35 |             loader: "url-loader",
36 |             options: {
37 |               limit: 1024,
38 |               name: "static/[name].[hash:5].[ext]",
39 |               esModule: false,
40 |             },
41 |           },
42 |         ],
43 |       },
44 |       {
45 |         test: /\.vue$/,
46 |         use: "vue-loader",
47 |       },
48 |       {
49 |         test: /\.css$/i,
50 |         use: [MiniCssExtractPlugin.loader, "css-loader"],
51 |       },
52 |       { test: /\.js$/, use: "babel-loader" },
53 |     ],
54 |   },
55 |   plugins: [
56 |     new CleanWebpackPlugin(), // 应用 清除输出目录 插件
57 |     new CopyPlugin({
58 |       // 应用 复制文件 插件
59 |       patterns: [
60 |         {
61 |           from: path.resolve(__dirname, "public"), // 将public目录中的所有文件
62 |           to: "./", // 复制到 输出目录 的根目录
63 |         },
64 |       ],
65 |     }),
66 |     new HtmlWebpackPlugin({
67 |       template: "./public/index.html",
68 |       filename: "index.html",
69 |     }),
70 |     new MiniCssExtractPlugin({
71 |       // 打包 css 代码 到文件中
72 |       filename: "css/[name].css",
73 |       chunkFilename: "css/common.[hash:5].css", // 针对公共样式的文件名
74 |     }),
75 |     new VueLoaderPlugin(),
76 |   ],
77 | };
78 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <p>
  5 |       For a guide and recipes on how to configure / customize this project,<br />
  6 |       check out the
  7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
  8 |         >vue-cli documentation</a
  9 |       >.
 10 |     </p>
 11 |     <h3>Installed CLI Plugins</h3>
 12 |     <ul>
 13 |       <li>
 14 |         <a
 15 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 16 |           target="_blank"
 17 |           rel="noopener"
 18 |           >babel</a
 19 |         >
 20 |       </li>
 21 |       <li>
 22 |         <a
 23 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
 24 |           target="_blank"
 25 |           rel="noopener"
 26 |           >router</a
 27 |         >
 28 |       </li>
 29 |       <li>
 30 |         <a
 31 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
 32 |           target="_blank"
 33 |           rel="noopener"
 34 |           >vuex</a
 35 |         >
 36 |       </li>
 37 |       <li>
 38 |         <a
 39 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 40 |           target="_blank"
 41 |           rel="noopener"
 42 |           >eslint</a
 43 |         >
 44 |       </li>
 45 |     </ul>
 46 |     <h3>Essential Links</h3>
 47 |     <ul>
 48 |       <li>
 49 |         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
 50 |       </li>
 51 |       <li>
 52 |         <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
 53 |           >Forum</a
 54 |         >
 55 |       </li>
 56 |       <li>
 57 |         <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
 58 |           >Community Chat</a
 59 |         >
 60 |       </li>
 61 |       <li>
 62 |         <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
 63 |           >Twitter</a
 64 |         >
 65 |       </li>
 66 |       <li>
 67 |         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
 68 |       </li>
 69 |     </ul>
 70 |     <h3>Ecosystem</h3>
 71 |     <ul>
 72 |       <li>
 73 |         <a href="https://router.vuejs.org" target="_blank" rel="noopener"
 74 |           >vue-router</a
 75 |         >
 76 |       </li>
 77 |       <li>
 78 |         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
 79 |       </li>
 80 |       <li>
 81 |         <a
 82 |           href="https://github.com/vuejs/vue-devtools#vue-devtools"
 83 |           target="_blank"
 84 |           rel="noopener"
 85 |           >vue-devtools</a
 86 |         >
 87 |       </li>
 88 |       <li>
 89 |         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
 90 |           >vue-loader</a
 91 |         >
 92 |       </li>
 93 |       <li>
 94 |         <a
 95 |           href="https://github.com/vuejs/awesome-vue"
 96 |           target="_blank"
 97 |           rel="noopener"
 98 |           >awesome-vue</a
 99 |         >
100 |       </li>
101 |     </ul>
102 |   </div>
103 | </template>
104 | 
105 | <script>
106 | export default {
107 |   name: "HelloWorld",
108 |   props: {
109 |     msg: String
110 |   }
111 | };
112 | </script>
113 | 
114 | <!-- Add "scoped" attribute to limit CSS to this component only -->
115 | <style scoped>
116 | h3 {
117 |   margin: 40px 0 0;
118 | }
119 | ul {
120 |   list-style-type: none;
121 |   padding: 0;
122 | }
123 | li {
124 |   display: inline-block;
125 |   margin: 0 10px;
126 | }
127 | a {
128 |   color: #42b983;
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------