Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
452ad3d7 by 宋楠
Options

dev

1 parent 4b1a42fb
Inline Side-by-side
Showing 10 changed files with 438 additions and 195 deletions
README.md
...@@ -25,8 +25,14 @@ ...@@ -25,8 +25,14 @@
25 - [√ Axios 封装及接口管理](#axios) 25 - [√ Axios 封装及接口管理](#axios)
26 - [√ Vue-router](#router) 26 - [√ Vue-router](#router)
27 - [√ vue.config.js 基础配置](#base) 27 - [√ vue.config.js 基础配置](#base)
28 - [√ vue.config.js 配置 proxy 跨域](#proxy) 28 - [√ 配置 proxy 跨域](#proxy)
29 - [√ vue.config.js 配置 proxy 跨域](#proxy) 29 - [√ 配置 alias 别名](#alias)
30 - [√ 配置 打包分析](#bundle)
31 - [√ 配置 externals 引入 cdn 资源 ](#externals)
32 - [√ 去掉 console.log ](#console)
33 - [√ splitChunks ](#console)
34 - [√ 添加 IE 兼容 ](#ie)
35
30 36
31 * Vuex 37 * Vuex
32 * Axios 封装 38 * Axios 封装
...@@ -476,7 +482,7 @@ module.exports = { ...@@ -476,7 +482,7 @@ module.exports = {
476 482
477 [▲ 回顶部](#top) 483 [▲ 回顶部](#top)
478 484
479 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> 485 ### <span id="proxy">✅ 配置 proxy 跨域 </span>
480 486
481 如果你的项目需要跨域设置，你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数 487 如果你的项目需要跨域设置，你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数
482 488
...@@ -515,10 +521,160 @@ export function getUserInfo(params) { ...@@ -515,10 +521,160 @@ export function getUserInfo(params) {
515 521
516 [▲ 回顶部](#top) 522 [▲ 回顶部](#top)
517 523
518 ### <span id="proxy">✅ vue.config.js 配置 proxy 跨域 </span> 524 ### <span id="alias">✅ 配置 alias 别名 </span>
525
526 ```javascript
527 const path = require("path");
528 const resolve = dir => path.join(__dirname, dir);
529 const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
530
531 module.exports = {
532 chainWebpack: config => {
533 // 添加别名
534 config.resolve.alias
535 .set('@', resolve('src'))
536 .set('assets', resolve('src/assets'))
537 .set('api', resolve('src/api'))
538 .set('views', resolve('src/views'))
539 .set('components', resolve('src/components'))
540 }
541 };
542 ```
543 [▲ 回顶部](#top)
544
545 ### <span id="bundle">✅ 配置 打包分析 </span>
546
547 ```javascript
548 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
549 .BundleAnalyzerPlugin;
550
551 module.exports = {
552 chainWebpack: config => {
553 // 打包分析
554 if (IS_PROD) {
555 config.plugin("webpack-report").use(BundleAnalyzerPlugin, [
556 {
557 analyzerMode: "static"
558 }
559 ]);
560 }
561 }
562 };
563 ```
564 ```bash
565 npm run build
566 ```
567 [▲ 回顶部](#top)
568
569 ### <span id="proxy">✅ 配置 externals 引入 cdn 资源 </span>
570
571 ```javascript
572 const defaultSettings = require('./src/config/index.js')
573 const name = defaultSettings.title || 'vue mobile template'
574 const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
575
576 // externals
577 const externals = {
578 vue: 'Vue',
579 'vue-router': 'VueRouter',
580 vuex: 'Vuex',
581 vant: 'vant',
582 axios: 'axios'
583 }
584 // cdn
585 const cdn = {
586 css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],
587 js: [
588 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',
589 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',
590 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
591 'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js',
592 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',
593 'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js'
594 ]
595 }
596 module.exports = {
597 configureWebpack: config => {
598 config.name = name
599 // 为生产环境修改配置...
600 if (IS_PROD) {
601 // externals
602 config.externals = externals
603 };
604 },
605 chainWebpack: config => {
606 // 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
607 config.plugin('html').tap(args => {
608 if (IS_PROD) {
609 // html中添加cdn
610 args[0].cdn = cdn
611 }
612 return args
613 })
614 }
615 };
616 ```
617  在 public/index.html 中添加
618
619 ```javascript
620 <!-- 使用CDN的CSS文件 -->
621 <% for (var i in
622 htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
623 <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
624 <% } %>
625 <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
626 <% for (var i in
627 htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
628 <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
629 <% } %>
630 ```
631
632 [▲ 回顶部](#top)
633
634 ### <span id="console">✅ 去掉 console.log </span>
635
636 ```bash
637 npm i -D babel-plugin-transform-remove-console
638 ```
639 在 babel.config.js 中配置
640
641 ```javascript
642 // 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
643 const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
644 const plugins = [
645 [
646 'import',
647 {
648 libraryName: 'vant',
649 libraryDirectory: 'es',
650 style: true
651 },
652 'vant'
653 ]
654 ]
655 // 去除 console.log
656 if (IS_PROD) {
657 plugins.push('transform-remove-console')
658 }
659
660 module.exports = {
661 presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
662 plugins
663 }
664
665 ```
519 666
520 [▲ 回顶部](#top) 667 [▲ 回顶部](#top)
521 668
669 ### <span id="ie">✅ 添加 IE 兼容 </span>
670
671 [▲ 回顶部](#top)
672
673 ### <span id="console">✅ 去掉 console.log </span>
674 [▲ 回顶部](#top)
675
676
677
522 #### 总结 678 #### 总结
523 679
524 因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长 680 因为项目刚刚构建起来，后面还会持续更新，实际使用过程中一定还有很多问题，如果文章中有错误希望能够被指正，一起成长
......
babel.config.js
1 // 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
2 const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
3 const plugins = [
4 [
5 'import',
6 {
7 libraryName: 'vant',
8 libraryDirectory: 'es',
9 style: true
10 },
11 'vant'
12 ]
13 ]
14 // 去除 console.log
15 if (IS_PROD) {
16 plugins.push('transform-remove-console')
17 }
18
1 module.exports = { 19 module.exports = {
2 presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]], 20 presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
3 plugins: [ 21 plugins
4 [
5 'import',
6 {
7 libraryName: 'vant',
8 libraryDirectory: 'es',
9 style: true
10 },
11 'vant'
12 ]
13 ]
14 } 22 }
......
package-lock.json
This diff could not be displayed because it is too large.
package.json
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 "axios": "^0.19.2", 14 "axios": "^0.19.2",
15 "core-js": "^3.6.4", 15 "core-js": "^3.6.4",
16 "lib-flexible": "^0.3.2", 16 "lib-flexible": "^0.3.2",
17 "lodash": "^4.17.15",
17 "vant": "^2.4.7", 18 "vant": "^2.4.7",
18 "vue": "^2.6.11", 19 "vue": "^2.6.11",
19 "vue-router": "^3.1.5", 20 "vue-router": "^3.1.5",
...@@ -36,6 +37,7 @@ ...@@ -36,6 +37,7 @@
36 "prettier": "^1.19.1", 37 "prettier": "^1.19.1",
37 "sass-loader": "^8.0.2", 38 "sass-loader": "^8.0.2",
38 "script-ext-html-webpack-plugin": "^2.1.4", 39 "script-ext-html-webpack-plugin": "^2.1.4",
39 "vue-template-compiler": "^2.6.11" 40 "vue-template-compiler": "^2.6.11",
41 "webpack-bundle-analyzer": "^3.7.0"
40 } 42 }
41 } 43 }
......
src/components/HelloWorld.vue deleted 100644 → 0
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">vue-cli documentation</a>.
8 </p>
9 <h3>Installed CLI Plugins</h3>
10 <ul>
11 <li>
12 <a
13 href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
14 target="_blank"
15 rel="noopener"
16 >babel</a
17 >
18 </li>
19 <li>
20 <a
21 href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
22 target="_blank"
23 rel="noopener"
24 >eslint</a
25 >
26 </li>
27 </ul>
28 <h3>Essential Links</h3>
29 <ul>
30 <li>
31 <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
32 </li>
33 <li>
34 <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
35 </li>
36 <li>
37 <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
38 </li>
39 <li>
40 <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
41 </li>
42 <li>
43 <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
44 </li>
45 </ul>
46 <h3>Ecosystem</h3>
47 <ul>
48 <li>
49 <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
50 </li>
51 <li>
52 <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
53 </li>
54 <li>
55 <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
56 </li>
57 <li>
58 <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
59 </li>
60 <li>
61 <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
62 </li>
63 </ul>
64 </div>
65 </template>
66
67 <script>
68 export default {
69 name: 'HelloWorld',
70 props: {
71 msg: String
72 }
73 }
74 </script>
75
76 <!-- Add "scoped" attribute to limit CSS to this component only -->
77 <style scoped>
78 h3 {
79 margin: 40px 0 0;
80 }
81 ul {
82 list-style-type: none;
83 padding: 0;
84 }
85 li {
86 display: inline-block;
87 margin: 0 10px;
88 }
89 a {
90 color: #42b983;
91 }
92 </style>
src/components/TabBar.vue 0 → 100644
1 <template>
2 <div>
3 <van-tabbar fixed v-model="active" @change="onChange">
4 <van-tabbar-item icon="home-o">首页</van-tabbar-item>
5 <van-tabbar-item icon="good-job-o">github</van-tabbar-item>
6 </van-tabbar>
7 </div>
8 </template>
9
10 <script>
11 import _ from 'lodash'
12 console.log(_.join(['a', 'b'], '~'))
13 export default {
14 name: 'TabBar',
15 data() {
16 return {
17 active: 0
18 }
19 },
20 methods: {
21 onChange(index) {
22 if (index === 1) window.location.href = 'https://github.com/sunniejs/vue-h5-template'
23 }
24 }
25 }
26 </script>
27
28 <!-- Add "scoped" attribute to limit CSS to this component only -->
29 <style scoped>
30 h3 {
31 margin: 40px 0 0;
32 }
33 ul {
34 list-style-type: none;
35 padding: 0;
36 }
37 li {
38 display: inline-block;
39 margin: 0 10px;
40 }
41 a {
42 color: #42b983;
43 }
44 </style>
src/router/index.js
...@@ -11,6 +11,15 @@ export const router = [ ...@@ -11,6 +11,15 @@ export const router = [
11 title: '首页', // 页面标题 11 title: '首页', // 页面标题
12 keepAlive: false // keep-alive 标识 12 keepAlive: false // keep-alive 标识
13 } 13 }
14 },
15 {
16 path: '/about',
17 name: 'about',
18 component: () => import('@/views/home/about'),
19 meta: {
20 title: '关于我',
21 keepAlive: false
22 }
14 } 23 }
15 ] 24 ]
16 25
......
src/views/home/about.vue 0 → 100644
1 <!-- home -->
2 <template>
3 <div class="app-container">
4 <div class="warpper">
5 <h1 class="demo-home__title"><img src="https://imgs.solui.cn/weapp/logo.png" /><span>VUE H5开发模板</span></h1>
6 <h2 class="demo-home__desc">
7 A vue h5 template with Vant UI
8 </h2>
9 </div>
10 <van-cell icon="success" v-for="item in list" :key="item" :title="item" />
11 <!-- tabbar -->
12 <TabBar></TabBar>
13 </div>
14 </template>
15
16 <script>
17 import TabBar from '@/components/TabBar'
18 // 请求接口
19 import {getUserInfo} from '@/api/user.js'
20
21 export default {
22 components: {
23 TabBar
24 },
25
26 data() {
27 return {
28 list: [
29 'Vue-cli4',
30 'VantUI组件按需加载',
31 'Sass',
32 'Webpack 4',
33 'Vue-router',
34 'Vuex',
35 'Axios封装',
36 'rem适配方案',
37 '多环境配置',
38 '生产环境cdn优化首屏加速',
39 'babel低版本浏览器兼容',
40 'Eslint+Pettier统一开发规范'
41 ]
42 }
43 },
44
45 computed: {},
46
47 mounted() {
48 this.initData()
49 },
50
51 methods: {
52 // 请求数据案例
53 initData() {
54 // 请求接口数据，仅作为展示，需要配置src->config下环境文件
55 const params = {user: 'sunnie'}
56 getUserInfo(params)
57 .then(() => {})
58 .catch(() => {})
59 }
60 }
61 }
62 </script>
63 <style lang="scss" scoped>
64 .app-container {
65 .warpper {
66 padding: 12px;
67 .demo-home__title {
68 margin: 0 0 6px;
69 font-size: 32px;
70 .demo-home__title img,
71 .demo-home__title span {
72 display: inline-block;
73 vertical-align: middle;
74 }
75 img {
76 width: 32px;
77 }
78 span {
79 margin-left: 16px;
80 font-weight: 500;
81 }
82 }
83 .demo-home__desc {
84 margin: 0 0 20px;
85 color: rgba(69, 90, 100, 0.6);
86 font-size: 14px;
87 }
88 }
89 }
90 </style>
src/views/home/index.vue
...@@ -8,22 +8,23 @@ ...@@ -8,22 +8,23 @@
8 </h2> 8 </h2>
9 </div> 9 </div>
10 <van-cell icon="success" v-for="item in list" :key="item" :title="item" /> 10 <van-cell icon="success" v-for="item in list" :key="item" :title="item" />
11 <van-tabbar fixed v-model="active" @change="onChange"> 11 <!-- tabbar -->
12 <van-tabbar-item icon="home-o">首页</van-tabbar-item> 12 <TabBar></TabBar>
13 <van-tabbar-item icon="good-job-o">github</van-tabbar-item>
14 </van-tabbar>
15 </div> 13 </div>
16 </template> 14 </template>
17 15
18 <script> 16 <script>
17 import TabBar from '@/components/TabBar'
19 // 请求接口 18 // 请求接口
20 import { getUserInfo } from '@/api/user.js' 19 import {getUserInfo} from '@/api/user.js'
20
21 export default { 21 export default {
22 components: {}, 22 components: {
23 TabBar
24 },
23 25
24 data() { 26 data() {
25 return { 27 return {
26 active: 0,
27 list: [ 28 list: [
28 'Vue-cli4', 29 'Vue-cli4',
29 'VantUI组件按需加载', 30 'VantUI组件按需加载',
...@@ -51,18 +52,16 @@ export default { ...@@ -51,18 +52,16 @@ export default {
51 // 请求数据案例 52 // 请求数据案例
52 initData() { 53 initData() {
53 // 请求接口数据，仅作为展示，需要配置src->config下环境文件 54 // 请求接口数据，仅作为展示，需要配置src->config下环境文件
54 const params = {user:'sunnie'} 55 const params = {user: 'sunnie'}
55 getUserInfo() 56 getUserInfo(params)
56 .then(() => { }) 57 .then(() => {})
57 .catch(() => { }) 58 .catch(() => {})
58 },
59 onChange(index) {
60 if (index === 1) window.location.href = 'https://github.com/sunnie1992/vue-h5-template'
61 } 59 }
62 } 60 }
63 } 61 }
64 </script> 62 </script>
65 <style lang="scss" scoped> 63 <style lang="scss" scoped>
64 // @import '@/assets/css/index.scss';
66 .app-container { 65 .app-container {
67 .warpper { 66 .warpper {
68 padding: 12px; 67 padding: 12px;
......
vue.config.js
1 'use strict' 1 'use strict'
2 const path = require('path') 2 const path = require('path')
3 const defaultSettings = require('./src/config/index.js') 3 const defaultSettings = require('./src/config/index.js')
4 function resolve(dir) { 4 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
5 return path.join(__dirname, dir) 5
6 } 6 const resolve = dir => path.join(__dirname, dir)
7 const name = defaultSettings.title || 'vue mobile template' // page title 7 // page title
8 const name = defaultSettings.title || 'vue mobile template'
9 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
8 10
11 // externals
9 const externals = { 12 const externals = {
10 vue: 'Vue', 13 vue: 'Vue',
11 'vue-router': 'VueRouter', 14 'vue-router': 'VueRouter',
...@@ -13,27 +16,39 @@ const externals = { ...@@ -13,27 +16,39 @@ const externals = {
13 vant: 'vant', 16 vant: 'vant',
14 axios: 'axios' 17 axios: 'axios'
15 } 18 }
16 // cdn 19 // CDN外链，会插入到index.html中
17 const cdn = { 20 const cdn = {
18 // 开发环境 21 // 开发环境
19 dev: { 22 dev: {
20 css: [], 23 css: [
24 ],
21 js: [] 25 js: []
22 }, 26 },
23 // 生产环境 27 // 生产环境
24 build: { 28 build: {
25 css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'], 29 css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
26 js: [ 30 js: [
27 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js', 31 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
28 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js', 32 'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
29 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js', 33 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
30 'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js', 34 'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
31 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js', 35 'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
32 'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js'
33 ] 36 ]
34 } 37 }
35 } 38 }
36 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV) 39 // const cdn = {
40 // css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
41 // js: [
42 // 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js',
43 // 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.5/vue-router.min.js',
44 // 'https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js',
45 // 'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js',
46 // 'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js',
47 // 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',
48
49 // ]
50 // }
51
37 module.exports = { 52 module.exports = {
38 publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用 53 publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
39 // publicPath: '/app/', //署应用包时的基本 URL。 vue-router history模式使用 54 // publicPath: '/app/', //署应用包时的基本 URL。 vue-router history模式使用
...@@ -48,7 +63,7 @@ module.exports = { ...@@ -48,7 +63,7 @@ module.exports = {
48 // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层 63 // 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
49 warnings: false, 64 warnings: false,
50 errors: true 65 errors: true
51 }, 66 }
52 // proxy: { 67 // proxy: {
53 // //配置跨域 68 // //配置跨域
54 // '/api': { 69 // '/api': {
...@@ -63,87 +78,99 @@ module.exports = { ...@@ -63,87 +78,99 @@ module.exports = {
63 }, 78 },
64 79
65 configureWebpack: config => { 80 configureWebpack: config => {
81 config.name = name
66 // 为生产环境修改配置... 82 // 为生产环境修改配置...
67 if (process.env.NODE_ENV === 'production') { 83 if (IS_PROD) {
68 // externals里的模块不打包 84 // externals
69 Object.assign(config, { 85 config.externals = externals
70 name: name,
71 externals: externals
72 })
73 } 86 }
74 // 为开发环境修改配置... 87 // 为开发环境修改配置...
75 // if (process.env.NODE_ENV === 'development') { 88 // if (process.env.NODE_ENV === 'development') {
76 // } 89 // }
77 }, 90 },
78 chainWebpack(config) { 91
92 chainWebpack: config => {
79 config.plugins.delete('preload') // TODO: need test 93 config.plugins.delete('preload') // TODO: need test
80 config.plugins.delete('prefetch') // TODO: need test 94 config.plugins.delete('prefetch') // TODO: need test
81 // alias 95
96 // 别名 alias
82 config.resolve.alias 97 config.resolve.alias
83 .set('@', resolve('src')) 98 .set('@', resolve('src'))
84 .set('assets', resolve('src/assets')) 99 .set('assets', resolve('src/assets'))
85 .set('api', resolve('src/api')) 100 .set('api', resolve('src/api'))
86 .set('views', resolve('src/views')) 101 .set('views', resolve('src/views'))
87 .set('components', resolve('src/components')) 102 .set('components', resolve('src/components'))
88 103 // 打包分析
104 if (IS_PROD) {
105 config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
106 {
107 analyzerMode: 'static'
108 }
109 ])
110 }
89 /** 111 /**
90 * 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改 112 * 添加CDN参数到htmlWebpackPlugin配置中
91 */ 113 */
92 config.plugin('html').tap(args => { 114 config.plugin('html').tap(args => {
93 if (process.env.NODE_ENV === 'production') { 115 if (IS_PROD) {
94 args[0].cdn = cdn.build 116 args[0].cdn = cdn.build
95 } 117 } else {
96 if (process.env.NODE_ENV === 'development') {
97 args[0].cdn = cdn.dev 118 args[0].cdn = cdn.dev
98 } 119 }
99 return args
100 })
101 120
121 return args
122 })
102 // set preserveWhitespace 123 // set preserveWhitespace
103 config.module 124 // config.module
104 .rule('vue') 125 // .rule('vue')
105 .use('vue-loader') 126 // .use('vue-loader')
106 .loader('vue-loader') 127 // .loader('vue-loader')
107 .tap(options => { 128 // .tap(options => {
108 options.compilerOptions.preserveWhitespace = true 129 // options.compilerOptions.preserveWhitespace = true
109 return options 130 // return options
110 }) 131 // })
111 .end() 132 // .end()
112 133
113 config 134 // config
114 // https://webpack.js.org/configuration/devtool/#development 135 // // https://webpack.js.org/configuration/devtool/#development
115 .when(process.env.NODE_ENV === 'development', config => config.devtool('cheap-source-map')) 136 // .when(process.env.NODE_ENV === 'development', config => config.devtool('cheap-source-map'))
116 137
117 config.when(process.env.NODE_ENV !== 'development', config => { 138 // config.when(IS_PROD, config => {
118 config 139 // config
119 .plugin('ScriptExtHtmlWebpackPlugin') 140 // .plugin('ScriptExtHtmlWebpackPlugin')
120 .after('html') 141 // .after('html')
121 .use('script-ext-html-webpack-plugin', [ 142 // .use('script-ext-html-webpack-plugin', [
122 { 143 // {
123 // `runtime` must same as runtimeChunk name. default is `runtime` 144 // // `runtime` must same as runtimeChunk name. default is `runtime`
124 inline: /runtime\..*\.js$/ 145 // inline: /runtime\..*\.js$/
125 } 146 // }
126 ]) 147 // ])
127 .end() 148 // .end()
128 config.optimization.splitChunks({ 149 // config.optimization.splitChunks({
129 chunks: 'all', 150 // chunks: 'all',
130 cacheGroups: { 151 // cacheGroups: {
131 commons: { 152 // // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
132 name: 'chunk-commons', 153 // commons: {
133 test: resolve('src/components'), // can customize your rules 154 // name: 'chunk-commons',
134 minChunks: 3, // minimum common number 155 // test: resolve('src/components'),
135 priority: 5, 156 // minChunks: 3, // 被至少用三次以上打包分离
136 reuseExistingChunk: true 157 // priority: 5, // 优先级
137 }, 158 // reuseExistingChunk: true // 复用其他chunk内已拥有的模块
138 libs: { 159 // },
139 name: 'chunk-libs', 160 // // vantUI: {
140 chunks: 'initial', // only package third parties that are initially dependent 161 // // name: 'chunk-vantUI', // 将 vant 打包到单独文件
141 test: /[\\/]node_modules[\\/]/, 162 // // priority: 20,
142 priority: 10 163 // // test: /[\\/]node_modules[\\/]_?vant(.*)/ // in order to adapt to cnpm
143 } 164 // // },
144 } 165 // libs: {
145 }) 166 // name: 'chunk-libs',
146 config.optimization.runtimeChunk('single') 167 // chunks: 'initial', // only package third parties that are initially dependent
147 }) 168 // test: /[\\/]node_modules[\\/]/,
169 // priority: 10
170 // }
171 // }
172 // })
173 // config.optimization.runtimeChunk('single')
174 // })
148 } 175 }
149 } 176 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!