push doc
This commit is contained in:
taylor
15
docs/.vuepress/.temp/internal/clientAppEnhances.js
Normal file
15
docs/.vuepress/.temp/internal/clientAppEnhances.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import clientAppEnhance0 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-medium-zoom/lib/client/clientAppEnhance.js'
|
||||
import clientAppEnhance1 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-theme-data/lib/client/clientAppEnhance.js'
|
||||
import clientAppEnhance2 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/theme-default/lib/client/clientAppEnhance.js'
|
||||
import clientAppEnhance3 from '/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/sass-palette/load-hope.js'
|
||||
import clientAppEnhance4 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-external-link-icon/lib/client/clientAppEnhance.js'
|
||||
import clientAppEnhance5 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-search/lib/client/clientAppEnhance.js'
|
||||
|
||||
export const clientAppEnhances = [
|
||||
clientAppEnhance0,
|
||||
clientAppEnhance1,
|
||||
clientAppEnhance2,
|
||||
clientAppEnhance3,
|
||||
clientAppEnhance4,
|
||||
clientAppEnhance5,
|
||||
]
|
||||
5
docs/.vuepress/.temp/internal/clientAppRootComponents.js
Normal file
5
docs/.vuepress/.temp/internal/clientAppRootComponents.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import clientAppRootComponent0 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-back-to-top/lib/client/components/BackToTop.js'
|
||||
|
||||
export const clientAppRootComponents = [
|
||||
clientAppRootComponent0,
|
||||
]
|
||||
11
docs/.vuepress/.temp/internal/clientAppSetups.js
Normal file
11
docs/.vuepress/.temp/internal/clientAppSetups.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import clientAppSetup0 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-active-header-links/lib/client/clientAppSetup.js'
|
||||
import clientAppSetup1 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-nprogress/lib/client/clientAppSetup.js'
|
||||
import clientAppSetup2 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/theme-default/lib/client/clientAppSetup.js'
|
||||
import clientAppSetup3 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/vuepress-plugin-copy-code2/lib/client/appSetup.js'
|
||||
|
||||
export const clientAppSetups = [
|
||||
clientAppSetup0,
|
||||
clientAppSetup1,
|
||||
clientAppSetup2,
|
||||
clientAppSetup3,
|
||||
]
|
||||
6
docs/.vuepress/.temp/internal/layoutComponents.js
Normal file
6
docs/.vuepress/.temp/internal/layoutComponents.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
export const layoutComponents = {
|
||||
"404": defineAsyncComponent(() => import("/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/theme-default/lib/client/layouts/404.vue")),
|
||||
"Layout": defineAsyncComponent(() => import("/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/theme-default/lib/client/layouts/Layout.vue")),
|
||||
}
|
||||
80
docs/.vuepress/.temp/internal/pagesComponents.js
Normal file
80
docs/.vuepress/.temp/internal/pagesComponents.js
Normal file
@@ -0,0 +1,80 @@
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
export const pagesComponents = {
|
||||
// path: /
|
||||
"v-8daa1a0e": defineAsyncComponent(() => import(/* webpackChunkName: "v-8daa1a0e" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/index.html.vue")),
|
||||
// path: /base/
|
||||
"v-1455d425": defineAsyncComponent(() => import(/* webpackChunkName: "v-1455d425" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/index.html.vue")),
|
||||
// path: /base/base.html
|
||||
"v-a6cc4bba": defineAsyncComponent(() => import(/* webpackChunkName: "v-a6cc4bba" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/base.html.vue")),
|
||||
// path: /base/clean.html
|
||||
"v-21f1ba15": defineAsyncComponent(() => import(/* webpackChunkName: "v-21f1ba15" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/clean.html.vue")),
|
||||
// path: /base/config.html
|
||||
"v-e703ecdc": defineAsyncComponent(() => import(/* webpackChunkName: "v-e703ecdc" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/config.html.vue")),
|
||||
// path: /base/css.html
|
||||
"v-80c5304a": defineAsyncComponent(() => import(/* webpackChunkName: "v-80c5304a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/css.html.vue")),
|
||||
// path: /base/development.html
|
||||
"v-34029aa3": defineAsyncComponent(() => import(/* webpackChunkName: "v-34029aa3" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/development.html.vue")),
|
||||
// path: /base/font.html
|
||||
"v-85d4d936": defineAsyncComponent(() => import(/* webpackChunkName: "v-85d4d936" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/font.html.vue")),
|
||||
// path: /base/html.html
|
||||
"v-ab115cee": defineAsyncComponent(() => import(/* webpackChunkName: "v-ab115cee" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/html.html.vue")),
|
||||
// path: /base/image.html
|
||||
"v-03183b7a": defineAsyncComponent(() => import(/* webpackChunkName: "v-03183b7a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/image.html.vue")),
|
||||
// path: /base/javascript.html
|
||||
"v-0bd200c7": defineAsyncComponent(() => import(/* webpackChunkName: "v-0bd200c7" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/javascript.html.vue")),
|
||||
// path: /base/minifyHtml.html
|
||||
"v-50d92e02": defineAsyncComponent(() => import(/* webpackChunkName: "v-50d92e02" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/minifyHtml.html.vue")),
|
||||
// path: /base/optimizeCss.html
|
||||
"v-65f7fcd8": defineAsyncComponent(() => import(/* webpackChunkName: "v-65f7fcd8" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/optimizeCss.html.vue")),
|
||||
// path: /base/other.html
|
||||
"v-499655ae": defineAsyncComponent(() => import(/* webpackChunkName: "v-499655ae" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/other.html.vue")),
|
||||
// path: /base/output.html
|
||||
"v-5a4f3333": defineAsyncComponent(() => import(/* webpackChunkName: "v-5a4f3333" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/output.html.vue")),
|
||||
// path: /base/production.html
|
||||
"v-6940ce0a": defineAsyncComponent(() => import(/* webpackChunkName: "v-6940ce0a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/production.html.vue")),
|
||||
// path: /base/server.html
|
||||
"v-5e3bb631": defineAsyncComponent(() => import(/* webpackChunkName: "v-5e3bb631" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/server.html.vue")),
|
||||
// path: /base/summary.html
|
||||
"v-ce2194d0": defineAsyncComponent(() => import(/* webpackChunkName: "v-ce2194d0" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/summary.html.vue")),
|
||||
// path: /intro/
|
||||
"v-f9e30908": defineAsyncComponent(() => import(/* webpackChunkName: "v-f9e30908" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/index.html.vue")),
|
||||
// path: /intro/asset.html
|
||||
"v-0670fc65": defineAsyncComponent(() => import(/* webpackChunkName: "v-0670fc65" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/asset.html.vue")),
|
||||
// path: /intro/group.html
|
||||
"v-581e5b94": defineAsyncComponent(() => import(/* webpackChunkName: "v-581e5b94" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/group.html.vue")),
|
||||
// path: /intro/learn.html
|
||||
"v-7d0ce4de": defineAsyncComponent(() => import(/* webpackChunkName: "v-7d0ce4de" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/learn.html.vue")),
|
||||
// path: /intro/pre.html
|
||||
"v-10b408dc": defineAsyncComponent(() => import(/* webpackChunkName: "v-10b408dc" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/pre.html.vue")),
|
||||
// path: /origin/
|
||||
"v-2259a8b0": defineAsyncComponent(() => import(/* webpackChunkName: "v-2259a8b0" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/index.html.vue")),
|
||||
// path: /origin/loader.html
|
||||
"v-1cfd2df6": defineAsyncComponent(() => import(/* webpackChunkName: "v-1cfd2df6" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/loader.html.vue")),
|
||||
// path: /origin/plugin.html
|
||||
"v-2d7562d6": defineAsyncComponent(() => import(/* webpackChunkName: "v-2d7562d6" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/plugin.html.vue")),
|
||||
// path: /origin/summary.html
|
||||
"v-860cdcba": defineAsyncComponent(() => import(/* webpackChunkName: "v-860cdcba" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/summary.html.vue")),
|
||||
// path: /senior/
|
||||
"v-3fe9ea34": defineAsyncComponent(() => import(/* webpackChunkName: "v-3fe9ea34" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/index.html.vue")),
|
||||
// path: /senior/enhanceExperience.html
|
||||
"v-7964f787": defineAsyncComponent(() => import(/* webpackChunkName: "v-7964f787" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/enhanceExperience.html.vue")),
|
||||
// path: /senior/liftingSpeed.html
|
||||
"v-7b858f23": defineAsyncComponent(() => import(/* webpackChunkName: "v-7b858f23" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/liftingSpeed.html.vue")),
|
||||
// path: /senior/optimizePerformance.html
|
||||
"v-5489448c": defineAsyncComponent(() => import(/* webpackChunkName: "v-5489448c" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/optimizePerformance.html.vue")),
|
||||
// path: /senior/reduceVolume.html
|
||||
"v-5460e2da": defineAsyncComponent(() => import(/* webpackChunkName: "v-5460e2da" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/reduceVolume.html.vue")),
|
||||
// path: /senior/summary.html
|
||||
"v-1d695a4e": defineAsyncComponent(() => import(/* webpackChunkName: "v-1d695a4e" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/summary.html.vue")),
|
||||
// path: /project/
|
||||
"v-c9bbfba2": defineAsyncComponent(() => import(/* webpackChunkName: "v-c9bbfba2" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/index.html.vue")),
|
||||
// path: /project/react-cli.html
|
||||
"v-61413f94": defineAsyncComponent(() => import(/* webpackChunkName: "v-61413f94" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/react-cli.html.vue")),
|
||||
// path: /project/summary.html
|
||||
"v-2a04a4a2": defineAsyncComponent(() => import(/* webpackChunkName: "v-2a04a4a2" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/summary.html.vue")),
|
||||
// path: /project/vue-cli.html
|
||||
"v-04c1b7cf": defineAsyncComponent(() => import(/* webpackChunkName: "v-04c1b7cf" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/vue-cli.html.vue")),
|
||||
// path: /404.html
|
||||
"v-3706649a": defineAsyncComponent(() => import(/* webpackChunkName: "v-3706649a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/404.html.vue")),
|
||||
}
|
||||
78
docs/.vuepress/.temp/internal/pagesData.js
Normal file
78
docs/.vuepress/.temp/internal/pagesData.js
Normal file
@@ -0,0 +1,78 @@
|
||||
export const pagesData = {
|
||||
// path: /
|
||||
"v-8daa1a0e": () => import(/* webpackChunkName: "v-8daa1a0e" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/index.html.js").then(({ data }) => data),
|
||||
// path: /base/
|
||||
"v-1455d425": () => import(/* webpackChunkName: "v-1455d425" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/index.html.js").then(({ data }) => data),
|
||||
// path: /base/base.html
|
||||
"v-a6cc4bba": () => import(/* webpackChunkName: "v-a6cc4bba" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/base.html.js").then(({ data }) => data),
|
||||
// path: /base/clean.html
|
||||
"v-21f1ba15": () => import(/* webpackChunkName: "v-21f1ba15" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/clean.html.js").then(({ data }) => data),
|
||||
// path: /base/config.html
|
||||
"v-e703ecdc": () => import(/* webpackChunkName: "v-e703ecdc" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/config.html.js").then(({ data }) => data),
|
||||
// path: /base/css.html
|
||||
"v-80c5304a": () => import(/* webpackChunkName: "v-80c5304a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/css.html.js").then(({ data }) => data),
|
||||
// path: /base/development.html
|
||||
"v-34029aa3": () => import(/* webpackChunkName: "v-34029aa3" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/development.html.js").then(({ data }) => data),
|
||||
// path: /base/font.html
|
||||
"v-85d4d936": () => import(/* webpackChunkName: "v-85d4d936" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/font.html.js").then(({ data }) => data),
|
||||
// path: /base/html.html
|
||||
"v-ab115cee": () => import(/* webpackChunkName: "v-ab115cee" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/html.html.js").then(({ data }) => data),
|
||||
// path: /base/image.html
|
||||
"v-03183b7a": () => import(/* webpackChunkName: "v-03183b7a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/image.html.js").then(({ data }) => data),
|
||||
// path: /base/javascript.html
|
||||
"v-0bd200c7": () => import(/* webpackChunkName: "v-0bd200c7" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/javascript.html.js").then(({ data }) => data),
|
||||
// path: /base/minifyHtml.html
|
||||
"v-50d92e02": () => import(/* webpackChunkName: "v-50d92e02" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/minifyHtml.html.js").then(({ data }) => data),
|
||||
// path: /base/optimizeCss.html
|
||||
"v-65f7fcd8": () => import(/* webpackChunkName: "v-65f7fcd8" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/optimizeCss.html.js").then(({ data }) => data),
|
||||
// path: /base/other.html
|
||||
"v-499655ae": () => import(/* webpackChunkName: "v-499655ae" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/other.html.js").then(({ data }) => data),
|
||||
// path: /base/output.html
|
||||
"v-5a4f3333": () => import(/* webpackChunkName: "v-5a4f3333" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/output.html.js").then(({ data }) => data),
|
||||
// path: /base/production.html
|
||||
"v-6940ce0a": () => import(/* webpackChunkName: "v-6940ce0a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/production.html.js").then(({ data }) => data),
|
||||
// path: /base/server.html
|
||||
"v-5e3bb631": () => import(/* webpackChunkName: "v-5e3bb631" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/server.html.js").then(({ data }) => data),
|
||||
// path: /base/summary.html
|
||||
"v-ce2194d0": () => import(/* webpackChunkName: "v-ce2194d0" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/summary.html.js").then(({ data }) => data),
|
||||
// path: /intro/
|
||||
"v-f9e30908": () => import(/* webpackChunkName: "v-f9e30908" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/index.html.js").then(({ data }) => data),
|
||||
// path: /intro/asset.html
|
||||
"v-0670fc65": () => import(/* webpackChunkName: "v-0670fc65" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/asset.html.js").then(({ data }) => data),
|
||||
// path: /intro/group.html
|
||||
"v-581e5b94": () => import(/* webpackChunkName: "v-581e5b94" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/group.html.js").then(({ data }) => data),
|
||||
// path: /intro/learn.html
|
||||
"v-7d0ce4de": () => import(/* webpackChunkName: "v-7d0ce4de" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/learn.html.js").then(({ data }) => data),
|
||||
// path: /intro/pre.html
|
||||
"v-10b408dc": () => import(/* webpackChunkName: "v-10b408dc" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/pre.html.js").then(({ data }) => data),
|
||||
// path: /origin/
|
||||
"v-2259a8b0": () => import(/* webpackChunkName: "v-2259a8b0" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/index.html.js").then(({ data }) => data),
|
||||
// path: /origin/loader.html
|
||||
"v-1cfd2df6": () => import(/* webpackChunkName: "v-1cfd2df6" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/loader.html.js").then(({ data }) => data),
|
||||
// path: /origin/plugin.html
|
||||
"v-2d7562d6": () => import(/* webpackChunkName: "v-2d7562d6" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/plugin.html.js").then(({ data }) => data),
|
||||
// path: /origin/summary.html
|
||||
"v-860cdcba": () => import(/* webpackChunkName: "v-860cdcba" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/summary.html.js").then(({ data }) => data),
|
||||
// path: /senior/
|
||||
"v-3fe9ea34": () => import(/* webpackChunkName: "v-3fe9ea34" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/index.html.js").then(({ data }) => data),
|
||||
// path: /senior/enhanceExperience.html
|
||||
"v-7964f787": () => import(/* webpackChunkName: "v-7964f787" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/enhanceExperience.html.js").then(({ data }) => data),
|
||||
// path: /senior/liftingSpeed.html
|
||||
"v-7b858f23": () => import(/* webpackChunkName: "v-7b858f23" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/liftingSpeed.html.js").then(({ data }) => data),
|
||||
// path: /senior/optimizePerformance.html
|
||||
"v-5489448c": () => import(/* webpackChunkName: "v-5489448c" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/optimizePerformance.html.js").then(({ data }) => data),
|
||||
// path: /senior/reduceVolume.html
|
||||
"v-5460e2da": () => import(/* webpackChunkName: "v-5460e2da" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/reduceVolume.html.js").then(({ data }) => data),
|
||||
// path: /senior/summary.html
|
||||
"v-1d695a4e": () => import(/* webpackChunkName: "v-1d695a4e" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/summary.html.js").then(({ data }) => data),
|
||||
// path: /project/
|
||||
"v-c9bbfba2": () => import(/* webpackChunkName: "v-c9bbfba2" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/index.html.js").then(({ data }) => data),
|
||||
// path: /project/react-cli.html
|
||||
"v-61413f94": () => import(/* webpackChunkName: "v-61413f94" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/react-cli.html.js").then(({ data }) => data),
|
||||
// path: /project/summary.html
|
||||
"v-2a04a4a2": () => import(/* webpackChunkName: "v-2a04a4a2" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/summary.html.js").then(({ data }) => data),
|
||||
// path: /project/vue-cli.html
|
||||
"v-04c1b7cf": () => import(/* webpackChunkName: "v-04c1b7cf" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/vue-cli.html.js").then(({ data }) => data),
|
||||
// path: /404.html
|
||||
"v-3706649a": () => import(/* webpackChunkName: "v-3706649a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/404.html.js").then(({ data }) => data),
|
||||
}
|
||||
67
docs/.vuepress/.temp/internal/pagesRoutes.js
Normal file
67
docs/.vuepress/.temp/internal/pagesRoutes.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import { Vuepress } from '@vuepress/client/lib/components/Vuepress'
|
||||
|
||||
const routeItems = [
|
||||
["v-8daa1a0e","/",{"title":"首页"},["/index.html","/README.md"]],
|
||||
["v-1455d425","/base/",{"title":"前言"},["/base/index.html","/base/README.md"]],
|
||||
["v-a6cc4bba","/base/base.html",{"title":"基本使用"},["/base/base","/base/base.md"]],
|
||||
["v-21f1ba15","/base/clean.html",{"title":"自动清空上次打包资源"},["/base/clean","/base/clean.md"]],
|
||||
["v-e703ecdc","/base/config.html",{"title":"基本配置"},["/base/config","/base/config.md"]],
|
||||
["v-80c5304a","/base/css.html",{"title":"处理样式资源"},["/base/css","/base/css.md"]],
|
||||
["v-34029aa3","/base/development.html",{"title":"开发模式介绍"},["/base/development","/base/development.md"]],
|
||||
["v-85d4d936","/base/font.html",{"title":"处理字体图标资源"},["/base/font","/base/font.md"]],
|
||||
["v-ab115cee","/base/html.html",{"title":"处理 Html 资源"},["/base/html","/base/html.md"]],
|
||||
["v-03183b7a","/base/image.html",{"title":"处理图片资源"},["/base/image","/base/image.md"]],
|
||||
["v-0bd200c7","/base/javascript.html",{"title":"处理 js 资源"},["/base/javascript","/base/javascript.md"]],
|
||||
["v-50d92e02","/base/minifyHtml.html",{"title":"html 压缩"},["/base/minifyHtml","/base/minifyHtml.md"]],
|
||||
["v-65f7fcd8","/base/optimizeCss.html",{"title":"Css 处理"},["/base/optimizeCss","/base/optimizeCss.md"]],
|
||||
["v-499655ae","/base/other.html",{"title":"处理其他资源"},["/base/other","/base/other.md"]],
|
||||
["v-5a4f3333","/base/output.html",{"title":"修改输出资源的名称和路径"},["/base/output","/base/output.md"]],
|
||||
["v-6940ce0a","/base/production.html",{"title":"生产模式介绍"},["/base/production","/base/production.md"]],
|
||||
["v-5e3bb631","/base/server.html",{"title":"开发服务器&自动化"},["/base/server","/base/server.md"]],
|
||||
["v-ce2194d0","/base/summary.html",{"title":"总结"},["/base/summary","/base/summary.md"]],
|
||||
["v-f9e30908","/intro/",{"title":"依赖环境"},["/intro/index.html","/intro/README.md"]],
|
||||
["v-0670fc65","/intro/asset.html",{"title":"学习资料"},["/intro/asset","/intro/asset.md"]],
|
||||
["v-581e5b94","/intro/group.html",{"title":"适合群体"},["/intro/group","/intro/group.md"]],
|
||||
["v-7d0ce4de","/intro/learn.html",{"title":"我能学到什么"},["/intro/learn","/intro/learn.md"]],
|
||||
["v-10b408dc","/intro/pre.html",{"title":"前置知识"},["/intro/pre","/intro/pre.md"]],
|
||||
["v-2259a8b0","/origin/",{"title":"介绍"},["/origin/index.html","/origin/README.md"]],
|
||||
["v-1cfd2df6","/origin/loader.html",{"title":"Loader 原理"},["/origin/loader","/origin/loader.md"]],
|
||||
["v-2d7562d6","/origin/plugin.html",{"title":"Plugin 原理"},["/origin/plugin","/origin/plugin.md"]],
|
||||
["v-860cdcba","/origin/summary.html",{"title":"总结"},["/origin/summary","/origin/summary.md"]],
|
||||
["v-3fe9ea34","/senior/",{"title":"介绍"},["/senior/index.html","/senior/README.md"]],
|
||||
["v-7964f787","/senior/enhanceExperience.html",{"title":"提升开发体验"},["/senior/enhanceExperience","/senior/enhanceExperience.md"]],
|
||||
["v-7b858f23","/senior/liftingSpeed.html",{"title":"提升打包构建速度"},["/senior/liftingSpeed","/senior/liftingSpeed.md"]],
|
||||
["v-5489448c","/senior/optimizePerformance.html",{"title":"优化代码运行性能"},["/senior/optimizePerformance","/senior/optimizePerformance.md"]],
|
||||
["v-5460e2da","/senior/reduceVolume.html",{"title":"减少代码体积"},["/senior/reduceVolume","/senior/reduceVolume.md"]],
|
||||
["v-1d695a4e","/senior/summary.html",{"title":"总结"},["/senior/summary","/senior/summary.md"]],
|
||||
["v-c9bbfba2","/project/",{"title":"介绍"},["/project/index.html","/project/README.md"]],
|
||||
["v-61413f94","/project/react-cli.html",{"title":"React 脚手架"},["/project/react-cli","/project/react-cli.md"]],
|
||||
["v-2a04a4a2","/project/summary.html",{"title":"总结"},["/project/summary","/project/summary.md"]],
|
||||
["v-04c1b7cf","/project/vue-cli.html",{"title":"Vue 脚手架"},["/project/vue-cli","/project/vue-cli.md"]],
|
||||
["v-3706649a","/404.html",{"title":""},["/404"]],
|
||||
]
|
||||
|
||||
export const pagesRoutes = routeItems.reduce(
|
||||
(result, [name, path, meta, redirects]) => {
|
||||
result.push(
|
||||
{
|
||||
name,
|
||||
path,
|
||||
component: Vuepress,
|
||||
meta,
|
||||
},
|
||||
...redirects.map((item) => ({
|
||||
path: item,
|
||||
redirect: path,
|
||||
}))
|
||||
)
|
||||
return result
|
||||
},
|
||||
[
|
||||
{
|
||||
name: "404",
|
||||
path: "/:catchAll(.*)",
|
||||
component: Vuepress,
|
||||
}
|
||||
]
|
||||
)
|
||||
1473
docs/.vuepress/.temp/internal/searchIndex.js
Normal file
1473
docs/.vuepress/.temp/internal/searchIndex.js
Normal file
File diff suppressed because it is too large
Load Diff
29
docs/.vuepress/.temp/internal/siteData.js
Normal file
29
docs/.vuepress/.temp/internal/siteData.js
Normal file
@@ -0,0 +1,29 @@
|
||||
export const siteData = {
|
||||
"base": "/webpack5-docs/",
|
||||
"lang": "zh-CN",
|
||||
"title": "尚硅谷 Web 前端之 Webpack5 教程",
|
||||
"description": "Webpack5从小白到大神",
|
||||
"head": [
|
||||
[
|
||||
"link",
|
||||
{
|
||||
"rel": "icon",
|
||||
"href": "/imgs/favicon.ico"
|
||||
}
|
||||
]
|
||||
],
|
||||
"locales": {}
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updateSiteData) {
|
||||
__VUE_HMR_RUNTIME__.updateSiteData(siteData)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ siteData }) => {
|
||||
__VUE_HMR_RUNTIME__.updateSiteData(siteData)
|
||||
})
|
||||
}
|
||||
137
docs/.vuepress/.temp/internal/themeData.js
Normal file
137
docs/.vuepress/.temp/internal/themeData.js
Normal file
@@ -0,0 +1,137 @@
|
||||
export const themeData = {
|
||||
"logo": "/imgs/favicon.ico",
|
||||
"lastUpdated": false,
|
||||
"navbar": [
|
||||
{
|
||||
"text": "课程介绍",
|
||||
"link": "/intro/"
|
||||
},
|
||||
{
|
||||
"text": "基础",
|
||||
"link": "/base/"
|
||||
},
|
||||
{
|
||||
"text": "高级",
|
||||
"link": "/senior/"
|
||||
},
|
||||
{
|
||||
"text": "项目",
|
||||
"link": "/project/"
|
||||
},
|
||||
{
|
||||
"text": "原理",
|
||||
"link": "/origin/"
|
||||
}
|
||||
],
|
||||
"sidebar": {
|
||||
"/intro/": [
|
||||
{
|
||||
"text": "课程介绍",
|
||||
"children": [
|
||||
"/intro/README.md",
|
||||
"/intro/pre.md",
|
||||
"/intro/group.md",
|
||||
"/intro/learn.md",
|
||||
"/intro/asset.md"
|
||||
]
|
||||
}
|
||||
],
|
||||
"/base/": [
|
||||
{
|
||||
"text": "基础配置",
|
||||
"children": [
|
||||
"/base/README.md",
|
||||
"/base/base.md",
|
||||
"/base/config.md",
|
||||
"/base/development.md",
|
||||
"/base/css.md",
|
||||
"/base/image.md",
|
||||
"/base/output.md",
|
||||
"/base/clean.md",
|
||||
"/base/font.md",
|
||||
"/base/other.md",
|
||||
"/base/javascript.md",
|
||||
"/base/html.md",
|
||||
"/base/server.md",
|
||||
"/base/production.md",
|
||||
"/base/optimizeCss.md",
|
||||
"/base/minifyHtml.md",
|
||||
"/base/summary.md"
|
||||
]
|
||||
}
|
||||
],
|
||||
"/senior/": [
|
||||
{
|
||||
"text": "高级优化",
|
||||
"children": [
|
||||
"/senior/README.md",
|
||||
"/senior/enhanceExperience.md",
|
||||
"/senior/liftingSpeed.md",
|
||||
"/senior/reduceVolume.md",
|
||||
"/senior/optimizePerformance.md",
|
||||
"/senior/summary.md"
|
||||
]
|
||||
}
|
||||
],
|
||||
"/project/": [
|
||||
{
|
||||
"text": "项目配置",
|
||||
"children": [
|
||||
"/project/README.md",
|
||||
"/project/react-cli.md",
|
||||
"/project/vue-cli.md",
|
||||
"/project/summary.md"
|
||||
]
|
||||
}
|
||||
],
|
||||
"/origin/": [
|
||||
{
|
||||
"text": "原理分析",
|
||||
"children": [
|
||||
"/origin/README.md",
|
||||
"/origin/loader.md",
|
||||
"/origin/plugin.md",
|
||||
"/origin/summary.md"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"locales": {
|
||||
"/": {
|
||||
"selectLanguageName": "English"
|
||||
}
|
||||
},
|
||||
"darkMode": true,
|
||||
"repo": null,
|
||||
"selectLanguageText": "Languages",
|
||||
"selectLanguageAriaLabel": "Select language",
|
||||
"sidebarDepth": 2,
|
||||
"editLink": true,
|
||||
"editLinkText": "Edit this page",
|
||||
"lastUpdatedText": "Last Updated",
|
||||
"contributors": true,
|
||||
"contributorsText": "Contributors",
|
||||
"notFound": [
|
||||
"There's nothing here.",
|
||||
"How did we get here?",
|
||||
"That's a Four-Oh-Four.",
|
||||
"Looks like we've got some broken links."
|
||||
],
|
||||
"backToHome": "Take me home",
|
||||
"openInNewWindow": "open in new window",
|
||||
"toggleDarkMode": "toggle dark mode",
|
||||
"toggleSidebar": "toggle sidebar"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updateThemeData) {
|
||||
__VUE_HMR_RUNTIME__.updateThemeData(themeData)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ themeData }) => {
|
||||
__VUE_HMR_RUNTIME__.updateThemeData(themeData)
|
||||
})
|
||||
}
|
||||
26
docs/.vuepress/.temp/pages/404.html.js
Normal file
26
docs/.vuepress/.temp/pages/404.html.js
Normal file
@@ -0,0 +1,26 @@
|
||||
export const data = {
|
||||
"key": "v-3706649a",
|
||||
"path": "/404.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {
|
||||
"layout": "404"
|
||||
},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": null
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/404.html.vue
Normal file
1
docs/.vuepress/.temp/pages/404.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
74
docs/.vuepress/.temp/pages/base/0.html.js
Normal file
74
docs/.vuepress/.temp/pages/base/0.html.js
Normal file
@@ -0,0 +1,74 @@
|
||||
export const data = {
|
||||
"key": "v-638f430e",
|
||||
"path": "/base/0.html",
|
||||
"title": "基本使用",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "功能介绍",
|
||||
"slug": "功能介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "开始使用",
|
||||
"slug": "开始使用",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 资源目录",
|
||||
"slug": "_1-资源目录",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 创建文件",
|
||||
"slug": "_2-创建文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 下载依赖",
|
||||
"slug": "_3-下载依赖",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 启用 Webpack",
|
||||
"slug": "_4-启用-webpack",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 观察输出文件",
|
||||
"slug": "_5-观察输出文件",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "小结",
|
||||
"slug": "小结",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/0.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
70
docs/.vuepress/.temp/pages/base/0.html.vue
Normal file
70
docs/.vuepress/.temp/pages/base/0.html.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template><h1 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用" aria-hidden="true">#</a> 基本使用</h1>
|
||||
<p><strong><code>Webpack</code> 是一个静态资源打包工具。</strong></p>
|
||||
<p>它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。</p>
|
||||
<p>输出的文件就是编译好的文件，就可以在浏览器段运行了。</p>
|
||||
<p>我们将 <code>Webpack</code> 输出的文件叫做 <code>bundle</code>。</p>
|
||||
<h2 id="功能介绍" tabindex="-1"><a class="header-anchor" href="#功能介绍" aria-hidden="true">#</a> 功能介绍</h2>
|
||||
<p>Webpack 本身功能是有限的:</p>
|
||||
<ul>
|
||||
<li>开发模式：仅能编译 JS 中的 <code>ES Module</code> 语法</li>
|
||||
<li>生产模式：能编译 JS 中的 <code>ES Module</code> 语法，还能压缩 JS 代码</li>
|
||||
</ul>
|
||||
<h2 id="开始使用" tabindex="-1"><a class="header-anchor" href="#开始使用" aria-hidden="true">#</a> 开始使用</h2>
|
||||
<h3 id="_1-资源目录" tabindex="-1"><a class="header-anchor" href="#_1-资源目录" aria-hidden="true">#</a> 1. 资源目录</h3>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>├── webpack_code # 项目根目录（所有指令必须在这个目录运行）
|
||||
│ ├── src # 项目源码目录
|
||||
│ │ ├── js # js文件目录
|
||||
│ │ │ ├── count.js
|
||||
│ │ │ └── sum.js
|
||||
│ │ └── main.js # 项目主文件
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_2-创建文件" tabindex="-1"><a class="header-anchor" href="#_2-创建文件" aria-hidden="true">#</a> 2. 创建文件</h3>
|
||||
<ul>
|
||||
<li>count.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> x <span class="token operator">-</span> y<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
|
||||
<li>sum.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token operator">=></span> p <span class="token operator">+</span> c<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
|
||||
<li>main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_3-下载依赖" tabindex="-1"><a class="header-anchor" href="#_3-下载依赖" aria-hidden="true">#</a> 3. 下载依赖</h3>
|
||||
<p>打开终端，来到项目根目录。运行以下指令：</p>
|
||||
<ul>
|
||||
<li>初始化<code>package.json</code></li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm init -y
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>此时会生成一个基础的 <code>package.json</code> 文件。</p>
|
||||
<p><strong>需要注意的是 <code>package.json</code> 中 <code>name</code> 字段不能叫做 <code>webpack</code>, 否则下一步会报错</strong></p>
|
||||
<ul>
|
||||
<li>下载依赖</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm i webpack webpack-cli -D
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="_4-启用-webpack" tabindex="-1"><a class="header-anchor" href="#_4-启用-webpack" aria-hidden="true">#</a> 4. 启用 Webpack</h3>
|
||||
<ul>
|
||||
<li>开发模式</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=development
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul>
|
||||
<li>生产模式</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=production
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><code>npx webpack</code>: 是用来运行本地安装 <code>Webpack</code> 包的。</p>
|
||||
<p><code>./src/main.js</code>: 指定 <code>Webpack</code> 从 <code>main.js</code> 文件开始打包，不但会打包 <code>main.js</code>，还会将其依赖也一起打包进来。</p>
|
||||
<p><code>--mode=xxx</code>：指定模式（环境）。</p>
|
||||
<h3 id="_5-观察输出文件" tabindex="-1"><a class="header-anchor" href="#_5-观察输出文件" aria-hidden="true">#</a> 5. 观察输出文件</h3>
|
||||
<p>默认 <code>Webpack</code> 会将文件打包输出到 <code>dist</code> 目录下，我们查看 <code>dist</code> 目录下文件情况就好了</p>
|
||||
<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
|
||||
<p><code>Webpack</code> 本身功能比较少，只能处理 <code>js</code> 资源，一旦遇到 <code>css</code> 等其他资源就会报错。</p>
|
||||
<p>所以我们学习 <code>Webpack</code>，就是主要学习如何处理其他资源。</p>
|
||||
</template>
|
||||
49
docs/.vuepress/.temp/pages/base/1.html.js
Normal file
49
docs/.vuepress/.temp/pages/base/1.html.js
Normal file
@@ -0,0 +1,49 @@
|
||||
export const data = {
|
||||
"key": "v-65441bad",
|
||||
"path": "/base/1.html",
|
||||
"title": "基本配置",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "5 大核心概念",
|
||||
"slug": "_5-大核心概念",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "准备 Webpack 配置文件",
|
||||
"slug": "准备-webpack-配置文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "修改配置文件",
|
||||
"slug": "修改配置文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "小结",
|
||||
"slug": "小结",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/1.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
82
docs/.vuepress/.temp/pages/base/1.html.vue
Normal file
82
docs/.vuepress/.temp/pages/base/1.html.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template><h1 id="基本配置" tabindex="-1"><a class="header-anchor" href="#基本配置" aria-hidden="true">#</a> 基本配置</h1>
|
||||
<p>在开始使用 <code>Webpack</code> 之前，我们需要对 <code>Webpack</code> 的配置有一定的认识。</p>
|
||||
<h2 id="_5-大核心概念" tabindex="-1"><a class="header-anchor" href="#_5-大核心概念" aria-hidden="true">#</a> 5 大核心概念</h2>
|
||||
<ol>
|
||||
<li>entry（入口）</li>
|
||||
</ol>
|
||||
<p>指示 Webpack 从哪个文件开始打包</p>
|
||||
<ol start="2">
|
||||
<li>output（输出）</li>
|
||||
</ol>
|
||||
<p>指示 Webpack 打包完的文件输出到哪里去，如何命名等</p>
|
||||
<ol start="3">
|
||||
<li>loader（加载器）</li>
|
||||
</ol>
|
||||
<p>webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析</p>
|
||||
<ol start="4">
|
||||
<li>plugins（插件）</li>
|
||||
</ol>
|
||||
<p>扩展 Webpack 的功能</p>
|
||||
<ol start="5">
|
||||
<li>mode（模式）</li>
|
||||
</ol>
|
||||
<p>主要由两种模式：</p>
|
||||
<ul>
|
||||
<li>开发模式：development</li>
|
||||
<li>生产模式：production</li>
|
||||
</ul>
|
||||
<h2 id="准备-webpack-配置文件" tabindex="-1"><a class="header-anchor" href="#准备-webpack-配置文件" aria-hidden="true">#</a> 准备 Webpack 配置文件</h2>
|
||||
<p>在项目根目录下新建文件：<code>webpack.config.js</code></p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 入口</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 输出</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 加载器</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 插件</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 模式</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范</p>
|
||||
<h2 id="修改配置文件" tabindex="-1"><a class="header-anchor" href="#修改配置文件" aria-hidden="true">#</a> 修改配置文件</h2>
|
||||
<ol>
|
||||
<li>配置文件</li>
|
||||
</ol>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// Node.js的核心模块，专门用来处理文件路径</span>
|
||||
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 入口</span>
|
||||
<span class="token comment">// 相对路径和绝对路径都行</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 输出</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// path: 文件输出目录，必须是绝对路径</span>
|
||||
<span class="token comment">// path.resolve()方法返回一个绝对路径</span>
|
||||
<span class="token comment">// __dirname 当前文件的文件夹绝对路径</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// filename: 输出文件名</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 加载器</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 插件</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 模式</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span> <span class="token comment">// 开发模式</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><ol start="2">
|
||||
<li>运行指令</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>此时功能和之前一样，也不能处理样式资源</p>
|
||||
<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
|
||||
<p>Webpack 将来都通过 <code>webpack.config.js</code> 文件进行配置，来增强 Webpack 的功能</p>
|
||||
<p>我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式</p>
|
||||
</template>
|
||||
37
docs/.vuepress/.temp/pages/base/10.html.js
Normal file
37
docs/.vuepress/.temp/pages/base/10.html.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export const data = {
|
||||
"key": "v-43725e55",
|
||||
"path": "/base/10.html",
|
||||
"title": "自动清空上次打包资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 配置",
|
||||
"slug": "_1-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 运行指令",
|
||||
"slug": "_2-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/10.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
57
docs/.vuepress/.temp/pages/base/10.html.vue
Normal file
57
docs/.vuepress/.temp/pages/base/10.html.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template><h1 id="自动清空上次打包资源" tabindex="-1"><a class="header-anchor" href="#自动清空上次打包资源" aria-hidden="true">#</a> 自动清空上次打包资源</h1>
|
||||
<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于40kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br></div></div><h2 id="_2-运行指令" tabindex="-1"><a class="header-anchor" href="#_2-运行指令" aria-hidden="true">#</a> 2. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>观察 dist 目录资源情况</p>
|
||||
</template>
|
||||
49
docs/.vuepress/.temp/pages/base/11.html.js
Normal file
49
docs/.vuepress/.temp/pages/base/11.html.js
Normal file
@@ -0,0 +1,49 @@
|
||||
export const data = {
|
||||
"key": "v-452736f4",
|
||||
"path": "/base/11.html",
|
||||
"title": "处理字体图标资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载字体图标文件",
|
||||
"slug": "_1-下载字体图标文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 添加字体图标资源",
|
||||
"slug": "_2-添加字体图标资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 运行指令",
|
||||
"slug": "_4-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/11.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
84
docs/.vuepress/.temp/pages/base/11.html.vue
Normal file
84
docs/.vuepress/.temp/pages/base/11.html.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template><h1 id="处理字体图标资源" tabindex="-1"><a class="header-anchor" href="#处理字体图标资源" aria-hidden="true">#</a> 处理字体图标资源</h1>
|
||||
<h2 id="_1-下载字体图标文件" tabindex="-1"><a class="header-anchor" href="#_1-下载字体图标文件" aria-hidden="true">#</a> 1. 下载字体图标文件</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>打开<a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">阿里巴巴矢量图标库<ExternalLinkIcon/></a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>选择想要的图标添加到购物车，统一下载到本地</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h2 id="_2-添加字体图标资源" tabindex="-1"><a class="header-anchor" href="#_2-添加字体图标资源" aria-hidden="true">#</a> 2. 添加字体图标资源</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>src/fonts/iconfont.ttf</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>src/fonts/iconfont.woff</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>src/fonts/iconfont.woff2</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>src/css/iconfont.css</p>
|
||||
<ul>
|
||||
<li>注意字体文件路径需要修改</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p>src/main.js</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入字体图标资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 使用字体图标 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-arrow-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-ashbin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-browse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/static/js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><code>type: "asset/resource"</code>和<code>type: "asset"</code>的区别：</p>
|
||||
<ol>
|
||||
<li><code>type: "asset/resource"</code> 相当于<code>file-loader</code>, 将文件转化成 Webpack 能识别的资源，其他不做处理</li>
|
||||
<li><code>type: "asset"</code> 相当于<code>url-loader</code>, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式</li>
|
||||
</ol>
|
||||
<h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
</template>
|
||||
37
docs/.vuepress/.temp/pages/base/12.html.js
Normal file
37
docs/.vuepress/.temp/pages/base/12.html.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export const data = {
|
||||
"key": "v-46dc0f93",
|
||||
"path": "/base/12.html",
|
||||
"title": "处理其他资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 配置",
|
||||
"slug": "_1-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 运行指令",
|
||||
"slug": "_2-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/12.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
15
docs/.vuepress/.temp/pages/base/12.html.vue
Normal file
15
docs/.vuepress/.temp/pages/base/12.html.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template><h1 id="处理其他资源" tabindex="-1"><a class="header-anchor" href="#处理其他资源" aria-hidden="true">#</a> 处理其他资源</h1>
|
||||
<p>开发中可能还存在一些其他资源，如音视频等，我们也一起处理了</p>
|
||||
<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?|map4|map3|avi)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>就是在处理字体图标资源基础上增加其他文件类型，统一处理即可</p>
|
||||
<h2 id="_2-运行指令" tabindex="-1"><a class="header-anchor" href="#_2-运行指令" aria-hidden="true">#</a> 2. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
</template>
|
||||
81
docs/.vuepress/.temp/pages/base/13.html.js
Normal file
81
docs/.vuepress/.temp/pages/base/13.html.js
Normal file
@@ -0,0 +1,81 @@
|
||||
export const data = {
|
||||
"key": "v-4890e832",
|
||||
"path": "/base/13.html",
|
||||
"title": "处理 js 资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "Eslint",
|
||||
"slug": "eslint",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 配置文件",
|
||||
"slug": "_1-配置文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 具体配置",
|
||||
"slug": "_2-具体配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 在 Webpack 中使用",
|
||||
"slug": "_3-在-webpack-中使用",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. VSCode Eslint 插件",
|
||||
"slug": "_4-vscode-eslint-插件",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "Babel",
|
||||
"slug": "babel",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 配置文件",
|
||||
"slug": "_1-配置文件-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 具体配置",
|
||||
"slug": "_2-具体配置-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 在 Webpack 中使用",
|
||||
"slug": "_3-在-webpack-中使用-1",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/13.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
275
docs/.vuepress/.temp/pages/base/13.html.vue
Normal file
275
docs/.vuepress/.temp/pages/base/13.html.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template><h1 id="处理-js-资源" tabindex="-1"><a class="header-anchor" href="#处理-js-资源" aria-hidden="true">#</a> 处理 js 资源</h1>
|
||||
<p>有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？</p>
|
||||
<p>原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。</p>
|
||||
<p>其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。</p>
|
||||
<ul>
|
||||
<li>针对 js 兼容性处理，我们使用 Babel 来完成</li>
|
||||
<li>针对代码格式，我们使用 Eslint 来完成</li>
|
||||
</ul>
|
||||
<p>我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理</p>
|
||||
<h2 id="eslint" tabindex="-1"><a class="header-anchor" href="#eslint" aria-hidden="true">#</a> Eslint</h2>
|
||||
<p>可组装的 JavaScript 和 JSX 检查工具。</p>
|
||||
<p>这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能</p>
|
||||
<p>我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查</p>
|
||||
<h3 id="_1-配置文件" tabindex="-1"><a class="header-anchor" href="#_1-配置文件" aria-hidden="true">#</a> 1. 配置文件</h3>
|
||||
<p>配置文件由很多种写法：</p>
|
||||
<ul>
|
||||
<li><code>.eslintrc.*</code>：新建文件，位于项目根目录
|
||||
<ul>
|
||||
<li><code>.eslintrc</code></li>
|
||||
<li><code>.eslintrc.js</code></li>
|
||||
<li><code>.eslintrc.json</code></li>
|
||||
<li>区别在于配置格式不一样</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>package.json</code> 中 <code>eslintConfig</code>：不需要创建文件，在原有文件基础上写</li>
|
||||
</ul>
|
||||
<p>ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可</p>
|
||||
<h3 id="_2-具体配置" tabindex="-1"><a class="header-anchor" href="#_2-具体配置" aria-hidden="true">#</a> 2. 具体配置</h3>
|
||||
<p>我们以 <code>.eslintrc.js</code> 配置文件为例：</p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 解析选项</span>
|
||||
<span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 具体检查规则</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 继承其他规则</span>
|
||||
<span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token comment">// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol>
|
||||
<li>parserOptions 解析选项</li>
|
||||
</ol>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token comment">// ES 语法版本</span>
|
||||
<span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">"module"</span><span class="token punctuation">,</span> <span class="token comment">// ES 模块化</span>
|
||||
<span class="token literal-property property">ecmaFeatures</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// ES 其他特性</span>
|
||||
<span class="token literal-property property">jsx</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 如果是 React 项目，就需要开启 jsx 语法</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="2">
|
||||
<li>rules 具体规则</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li><code>"off"</code> 或 <code>0</code> - 关闭规则</li>
|
||||
<li><code>"warn"</code> 或 <code>1</code> - 开启规则，使用警告级别的错误：<code>warn</code> (不会导致程序退出)</li>
|
||||
<li><code>"error"</code> 或 <code>2</code> - 开启规则，使用错误级别的错误：<code>error</code> (当被触发的时候，程序会退出)</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">semi</span><span class="token operator">:</span> <span class="token string">"error"</span><span class="token punctuation">,</span> <span class="token comment">// 禁止使用分号</span>
|
||||
<span class="token string-property property">'array-callback-return'</span><span class="token operator">:</span> <span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 强制数组方法的回调函数中有 return 语句，否则警告</span>
|
||||
<span class="token string-property property">'default-case'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 要求 switch 语句中有 default 分支，否则警告</span>
|
||||
<span class="token punctuation">{</span> <span class="token literal-property property">commentPattern</span><span class="token operator">:</span> <span class="token string">'^no default$'</span> <span class="token punctuation">}</span> <span class="token comment">// 允许在最后注释 no default, 就不会有警告了</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">eqeqeq</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 强制使用 === 和 !==，否则警告</span>
|
||||
<span class="token string">'smart'</span> <span class="token comment">// https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>更多规则详见：<a href="https://eslint.bootcss.com/docs/rules/" target="_blank" rel="noopener noreferrer">规则文档<ExternalLinkIcon/></a></p>
|
||||
<ol start="3">
|
||||
<li>extends 继承</li>
|
||||
</ol>
|
||||
<p>开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。</p>
|
||||
<p>现有以下较为有名的规则：</p>
|
||||
<ul>
|
||||
<li><a href="https://eslint.bootcss.com/docs/rules/" target="_blank" rel="noopener noreferrer">Eslint 官方的规则<ExternalLinkIcon/></a>：<code>eslint:recommended</code></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint" target="_blank" rel="noopener noreferrer">Vue Cli 官方的规则<ExternalLinkIcon/></a>：<code>plugin:vue/essential</code></li>
|
||||
<li><a href="https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app" target="_blank" rel="noopener noreferrer">React Cli 官方的规则<ExternalLinkIcon/></a>：<code>react-app</code></li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 例如在React项目中，我们可以这样写配置</span>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"react-app"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 我们的规则会覆盖掉react-app的规则</span>
|
||||
<span class="token comment">// 所以想要修改规则直接改就是了</span>
|
||||
<span class="token literal-property property">eqeqeq</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"warn"</span><span class="token punctuation">,</span> <span class="token string">"smart"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="_3-在-webpack-中使用" tabindex="-1"><a class="header-anchor" href="#_3-在-webpack-中使用" aria-hidden="true">#</a> 3. 在 Webpack 中使用</h3>
|
||||
<ol>
|
||||
<li>下载包</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i eslint-webpack-plugin eslint -D
|
||||
</code></pre></div><ol start="2">
|
||||
<li>定义 Eslint 配置文件</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>.eslintrc.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 继承 Eslint 规则</span>
|
||||
<span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"eslint:recommended"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 启用node中全局变量</span>
|
||||
<span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">node</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">"module"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string-property property">"no-var"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 不能使用 var 定义变量</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ol start="3">
|
||||
<li>修改 js 文件代码</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="4">
|
||||
<li>配置</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>webpack.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token comment">// 省略</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><ol start="5">
|
||||
<li>运行指令</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>在控制台查看 Eslint 检查效果</p>
|
||||
<h3 id="_4-vscode-eslint-插件" tabindex="-1"><a class="header-anchor" href="#_4-vscode-eslint-插件" aria-hidden="true">#</a> 4. VSCode Eslint 插件</h3>
|
||||
<p>打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决</p>
|
||||
<h2 id="babel" tabindex="-1"><a class="header-anchor" href="#babel" aria-hidden="true">#</a> Babel</h2>
|
||||
<p>JavaScript 编译器。</p>
|
||||
<p>主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中</p>
|
||||
<h3 id="_1-配置文件-1" tabindex="-1"><a class="header-anchor" href="#_1-配置文件-1" aria-hidden="true">#</a> 1. 配置文件</h3>
|
||||
<p>配置文件由很多种写法：</p>
|
||||
<ul>
|
||||
<li><code>babel.config.*</code>：新建文件，位于项目根目录
|
||||
<ul>
|
||||
<li><code>babel.config.js</code></li>
|
||||
<li><code>babel.config.json</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>.babelrc.*</code>：新建文件，位于项目根目录
|
||||
<ul>
|
||||
<li><code>.babelrc</code></li>
|
||||
<li><code>.babelrc.js</code></li>
|
||||
<li><code>.babelrc.json</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>package.json</code> 中 <code>babel</code>：不需要创建文件，在原有文件基础上写</li>
|
||||
</ul>
|
||||
<p>Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可</p>
|
||||
<h3 id="_2-具体配置-1" tabindex="-1"><a class="header-anchor" href="#_2-具体配置-1" aria-hidden="true">#</a> 2. 具体配置</h3>
|
||||
<p>我们以 <code>babel.config.js</code> 配置文件为例：</p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 预设</span>
|
||||
<span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol>
|
||||
<li>presets 预设</li>
|
||||
</ol>
|
||||
<p>简单理解：就是一组 Babel 插件, 扩展 Babel 功能</p>
|
||||
<ul>
|
||||
<li><code>@babel/preset-env</code>: 一个智能预设，允许您使用最新的 JavaScript。</li>
|
||||
<li><code>@babel/preset-react</code>：一个用来编译 React jsx 语法的预设</li>
|
||||
<li><code>@babel/preset-typescript</code>：一个用来编译 TypeScript 语法的预设</li>
|
||||
</ul>
|
||||
<h3 id="_3-在-webpack-中使用-1" tabindex="-1"><a class="header-anchor" href="#_3-在-webpack-中使用-1" aria-hidden="true">#</a> 3. 在 Webpack 中使用</h3>
|
||||
<ol>
|
||||
<li>下载包</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i babel-loader @babel/core @babel/preset-env -D
|
||||
</code></pre></div><ol start="2">
|
||||
<li>定义 Babel 配置文件</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>babel.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/preset-env"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3">
|
||||
<li>修改 js 文件代码</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol start="4">
|
||||
<li>配置</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>webpack.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token comment">// 省略</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
|
||||
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><ol start="5">
|
||||
<li>运行指令</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开打包后的 <code>dist/static/js/main.js</code> 文件查看，会发现箭头函数等 ES6 语法已经转换了</p>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/base/14.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/14.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-4a45c0d1",
|
||||
"path": "/base/14.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/14.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/base/14.html.vue
Normal file
1
docs/.vuepress/.temp/pages/base/14.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
24
docs/.vuepress/.temp/pages/base/15.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/15.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-4bfa9970",
|
||||
"path": "/base/15.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/15.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/base/15.html.vue
Normal file
1
docs/.vuepress/.temp/pages/base/15.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
49
docs/.vuepress/.temp/pages/base/16.html.js
Normal file
49
docs/.vuepress/.temp/pages/base/16.html.js
Normal file
@@ -0,0 +1,49 @@
|
||||
export const data = {
|
||||
"key": "v-4daf720f",
|
||||
"path": "/base/16.html",
|
||||
"title": "处理 Html 资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 修改 index.html",
|
||||
"slug": "_3-修改-index-html",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 运行指令",
|
||||
"slug": "_4-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/16.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
62
docs/.vuepress/.temp/pages/base/16.html.vue
Normal file
62
docs/.vuepress/.temp/pages/base/16.html.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template><h1 id="处理-html-资源" tabindex="-1"><a class="header-anchor" href="#处理-html-资源" aria-hidden="true">#</a> 处理 Html 资源</h1>
|
||||
<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i html-webpack-plugin -D
|
||||
</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
|
||||
<ul>
|
||||
<li>webpack.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token comment">// 省略</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 以 public/index.html 为模板创建文件</span>
|
||||
<span class="token comment">// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源</span>
|
||||
<span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h2 id="_3-修改-index-html" tabindex="-1"><a class="header-anchor" href="#_3-修改-index-html" aria-hidden="true">#</a> 3. 修改 index.html</h2>
|
||||
<p>去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入</p>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-arrow-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-ashbin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-browse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>此时 dist 目录就会输出一个 index.html 文件</p>
|
||||
</template>
|
||||
43
docs/.vuepress/.temp/pages/base/17.html.js
Normal file
43
docs/.vuepress/.temp/pages/base/17.html.js
Normal file
@@ -0,0 +1,43 @@
|
||||
export const data = {
|
||||
"key": "v-4f644aae",
|
||||
"path": "/base/17.html",
|
||||
"title": "开发服务器&自动化",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 运行指令",
|
||||
"slug": "_3-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/17.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
22
docs/.vuepress/.temp/pages/base/17.html.vue
Normal file
22
docs/.vuepress/.temp/pages/base/17.html.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template><h1 id="开发服务器-自动化" tabindex="-1"><a class="header-anchor" href="#开发服务器-自动化" aria-hidden="true">#</a> 开发服务器&自动化</h1>
|
||||
<p>每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化</p>
|
||||
<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i webpack-dev-server -D
|
||||
</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
|
||||
<ul>
|
||||
<li>webpack.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 其他省略</span>
|
||||
<span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">"localhost"</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器域名</span>
|
||||
<span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">"3000"</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器端口号</span>
|
||||
<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动打开浏览器</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="_3-运行指令" tabindex="-1"><a class="header-anchor" href="#_3-运行指令" aria-hidden="true">#</a> 3. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack serve
|
||||
</code></pre></div><p><strong>注意运行指令发生了变化</strong></p>
|
||||
<p>并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。</p>
|
||||
<p>开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。</p>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/base/18.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/18.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-5119234d",
|
||||
"path": "/base/18.html",
|
||||
"title": "总结",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/18.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
3
docs/.vuepress/.temp/pages/base/18.html.vue
Normal file
3
docs/.vuepress/.temp/pages/base/18.html.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template><h1 id="总结" tabindex="-1"><a class="header-anchor" href="#总结" aria-hidden="true">#</a> 总结</h1>
|
||||
<p>我们现已完成开发环境的配置</p>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/base/19.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/19.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-52cdfbec",
|
||||
"path": "/base/19.html",
|
||||
"title": "准备",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/19.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
3
docs/.vuepress/.temp/pages/base/19.html.vue
Normal file
3
docs/.vuepress/.temp/pages/base/19.html.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template><h1 id="准备" tabindex="-1"><a class="header-anchor" href="#准备" aria-hidden="true">#</a> 准备</h1>
|
||||
<p>现有两个环境，</p>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/base/2.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/2.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-66f8f44c",
|
||||
"path": "/base/2.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/2.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/base/2.html.vue
Normal file
1
docs/.vuepress/.temp/pages/base/2.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
43
docs/.vuepress/.temp/pages/base/20.html.js
Normal file
43
docs/.vuepress/.temp/pages/base/20.html.js
Normal file
@@ -0,0 +1,43 @@
|
||||
export const data = {
|
||||
"key": "v-78589996",
|
||||
"path": "/base/20.html",
|
||||
"title": "提取 Css 成单独文件",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 运行指令",
|
||||
"slug": "_3-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/20.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
86
docs/.vuepress/.temp/pages/base/20.html.vue
Normal file
86
docs/.vuepress/.temp/pages/base/20.html.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template><h1 id="提取-css-成单独文件" tabindex="-1"><a class="header-anchor" href="#提取-css-成单独文件" aria-hidden="true">#</a> 提取 Css 成单独文件</h1>
|
||||
<p>Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式</p>
|
||||
<p>这样对于网站来说，会出现闪屏现象，用户体验不好</p>
|
||||
<p>我们应该是单独的 Css 文件，通过 link 标签加载性能才好</p>
|
||||
<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i mini-css-extract-plugin -D
|
||||
</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
|
||||
<ul>
|
||||
<li>webpack.prod.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"mini-css-extract-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 将 style-loader 替换成 MiniCssExtractPlugin.loader</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 会自动引入打包生成的css</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 提取css成单独文件</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 定义输出文件名和目录</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/css/main.css"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br></div></div><h2 id="_3-运行指令" tabindex="-1"><a class="header-anchor" href="#_3-运行指令" aria-hidden="true">#</a> 3. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm run build
|
||||
</code></pre></div></template>
|
||||
49
docs/.vuepress/.temp/pages/base/21.html.js
Normal file
49
docs/.vuepress/.temp/pages/base/21.html.js
Normal file
@@ -0,0 +1,49 @@
|
||||
export const data = {
|
||||
"key": "v-7a0d7235",
|
||||
"path": "/base/21.html",
|
||||
"title": "Css 兼容性处理",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 合并配置",
|
||||
"slug": "_3-合并配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 运行指令",
|
||||
"slug": "_4-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/21.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
226
docs/.vuepress/.temp/pages/base/21.html.vue
Normal file
226
docs/.vuepress/.temp/pages/base/21.html.vue
Normal file
File diff suppressed because one or more lines are too long
24
docs/.vuepress/.temp/pages/base/22.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/22.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-7bc24ad4",
|
||||
"path": "/base/22.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/22.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/base/22.html.vue
Normal file
1
docs/.vuepress/.temp/pages/base/22.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
24
docs/.vuepress/.temp/pages/base/23.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/23.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-7d772373",
|
||||
"path": "/base/23.html",
|
||||
"title": "html 压缩",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/23.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
4
docs/.vuepress/.temp/pages/base/23.html.vue
Normal file
4
docs/.vuepress/.temp/pages/base/23.html.vue
Normal file
@@ -0,0 +1,4 @@
|
||||
<template><h1 id="html-压缩" tabindex="-1"><a class="header-anchor" href="#html-压缩" aria-hidden="true">#</a> html 压缩</h1>
|
||||
<p>默认生产模式已经开启了：html 压缩和 js 压缩</p>
|
||||
<p>不需要额外进行配置</p>
|
||||
</template>
|
||||
179
docs/.vuepress/.temp/pages/base/3.html.js
Normal file
179
docs/.vuepress/.temp/pages/base/3.html.js
Normal file
@@ -0,0 +1,179 @@
|
||||
export const data = {
|
||||
"key": "v-68adcceb",
|
||||
"path": "/base/3.html",
|
||||
"title": "处理样式资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "介绍",
|
||||
"slug": "介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "处理 Css 资源",
|
||||
"slug": "处理-css-资源",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 添加 Css 资源",
|
||||
"slug": "_4-添加-css-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "处理 Less 资源",
|
||||
"slug": "处理-less-资源",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 添加 Less 资源",
|
||||
"slug": "_4-添加-less-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令-1",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "处理 Sass 和 Scss 资源",
|
||||
"slug": "处理-sass-和-scss-资源",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包-2",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍-2",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置-2",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 添加 Sass 资源",
|
||||
"slug": "_4-添加-sass-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令-2",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "处理 Styl 资源",
|
||||
"slug": "处理-styl-资源",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包-3",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍-3",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置-3",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 添加 Styl 资源",
|
||||
"slug": "_4-添加-styl-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令-3",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/3.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
323
docs/.vuepress/.temp/pages/base/3.html.vue
Normal file
323
docs/.vuepress/.temp/pages/base/3.html.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<template><h1 id="处理样式资源" tabindex="-1"><a class="header-anchor" href="#处理样式资源" aria-hidden="true">#</a> 处理样式资源</h1>
|
||||
<p>本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源</p>
|
||||
<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2>
|
||||
<p>Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源</p>
|
||||
<p>我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用</p>
|
||||
<p>官方文档找不到的话，可以从社区 Github 中搜索查询</p>
|
||||
<p><a href="https://webpack.docschina.org/loaders/" target="_blank" rel="noopener noreferrer">Webpack 官方 Loader 文档<ExternalLinkIcon/></a></p>
|
||||
<h2 id="处理-css-资源" tabindex="-1"><a class="header-anchor" href="#处理-css-资源" aria-hidden="true">#</a> 处理 Css 资源</h2>
|
||||
<h3 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i css-loader style-loader -D
|
||||
</code></pre></div><p>注意：需要下载两个 loader</p>
|
||||
<h3 id="_2-功能介绍" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍" aria-hidden="true">#</a> 2. 功能介绍</h3>
|
||||
<ul>
|
||||
<li><code>css-loader</code>：负责将 Css 文件编译成 Webpack 能识别的模块</li>
|
||||
<li><code>style-loader</code>：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容</li>
|
||||
</ul>
|
||||
<p>此时样式就会以 Style 标签的形式在页面上生效</p>
|
||||
<h3 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="_4-添加-css-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-css-资源" aria-hidden="true">#</a> 4. 添加 Css 资源</h3>
|
||||
<ul>
|
||||
<li>src/css/index.css</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box1</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 准备一个使用样式的 DOM 容器 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_5-运行指令" tabindex="-1"><a class="header-anchor" href="#_5-运行指令" aria-hidden="true">#</a> 5. 运行指令</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
<h2 id="处理-less-资源" tabindex="-1"><a class="header-anchor" href="#处理-less-资源" aria-hidden="true">#</a> 处理 Less 资源</h2>
|
||||
<h3 id="_1-下载包-1" tabindex="-1"><a class="header-anchor" href="#_1-下载包-1" aria-hidden="true">#</a> 1. 下载包</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i less-loader -D
|
||||
</code></pre></div><h3 id="_2-功能介绍-1" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-1" aria-hidden="true">#</a> 2. 功能介绍</h3>
|
||||
<ul>
|
||||
<li><code>less-loader</code>：负责将 Less 文件编译成 Css 文件</li>
|
||||
</ul>
|
||||
<h3 id="_3-配置-1" tabindex="-1"><a class="header-anchor" href="#_3-配置-1" aria-hidden="true">#</a> 3. 配置</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="_4-添加-less-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-less-资源" aria-hidden="true">#</a> 4. 添加 Less 资源</h3>
|
||||
<ul>
|
||||
<li>src/less/index.less</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_5-运行指令-1" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-1" aria-hidden="true">#</a> 5. 运行指令</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
<h2 id="处理-sass-和-scss-资源" tabindex="-1"><a class="header-anchor" href="#处理-sass-和-scss-资源" aria-hidden="true">#</a> 处理 Sass 和 Scss 资源</h2>
|
||||
<h3 id="_1-下载包-2" tabindex="-1"><a class="header-anchor" href="#_1-下载包-2" aria-hidden="true">#</a> 1. 下载包</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i sass-loader sass -D
|
||||
</code></pre></div><p>注意：需要下载两个</p>
|
||||
<h3 id="_2-功能介绍-2" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-2" aria-hidden="true">#</a> 2. 功能介绍</h3>
|
||||
<ul>
|
||||
<li><code>sass-loader</code>：负责将 Sass 文件编译成 css 文件</li>
|
||||
<li><code>sass</code>：<code>sass-loader</code> 依赖 <code>sass</code> 进行编译</li>
|
||||
</ul>
|
||||
<h3 id="_3-配置-2" tabindex="-1"><a class="header-anchor" href="#_3-配置-2" aria-hidden="true">#</a> 3. 配置</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h3 id="_4-添加-sass-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-sass-资源" aria-hidden="true">#</a> 4. 添加 Sass 资源</h3>
|
||||
<ul>
|
||||
<li>src/sass/index.sass</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 可以省略大括号和分号 */</span>
|
||||
.box3
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> hotpink
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/sass/index.scss</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box4</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> lightpink<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="_5-运行指令-2" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-2" aria-hidden="true">#</a> 5. 运行指令</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
<h2 id="处理-styl-资源" tabindex="-1"><a class="header-anchor" href="#处理-styl-资源" aria-hidden="true">#</a> 处理 Styl 资源</h2>
|
||||
<h3 id="_1-下载包-3" tabindex="-1"><a class="header-anchor" href="#_1-下载包-3" aria-hidden="true">#</a> 1. 下载包</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i stylus-loader -D
|
||||
</code></pre></div><h3 id="_2-功能介绍-3" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-3" aria-hidden="true">#</a> 2. 功能介绍</h3>
|
||||
<ul>
|
||||
<li><code>stylus-loader</code>：负责将 Styl 文件编译成 Css 文件</li>
|
||||
</ul>
|
||||
<h3 id="_3-配置-3" tabindex="-1"><a class="header-anchor" href="#_3-配置-3" aria-hidden="true">#</a> 3. 配置</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h3 id="_4-添加-styl-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-styl-资源" aria-hidden="true">#</a> 4. 添加 Styl 资源</h3>
|
||||
<ul>
|
||||
<li>src/styl/index.styl</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 可以省略大括号、分号、冒号 */</span>
|
||||
.box width 100px height 100px background-color pink<span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 准备一个使用样式的 DOM 容器 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_5-运行指令-3" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-3" aria-hidden="true">#</a> 5. 运行指令</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
</template>
|
||||
55
docs/.vuepress/.temp/pages/base/4.html.js
Normal file
55
docs/.vuepress/.temp/pages/base/4.html.js
Normal file
@@ -0,0 +1,55 @@
|
||||
export const data = {
|
||||
"key": "v-6a62a58a",
|
||||
"path": "/base/4.html",
|
||||
"title": "处理 Css 资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 添加 Css 资源",
|
||||
"slug": "_4-添加-css-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/4.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
71
docs/.vuepress/.temp/pages/base/4.html.vue
Normal file
71
docs/.vuepress/.temp/pages/base/4.html.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template><h1 id="处理-css-资源" tabindex="-1"><a class="header-anchor" href="#处理-css-资源" aria-hidden="true">#</a> 处理 Css 资源</h1>
|
||||
<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i css-loader style-loader -D
|
||||
</code></pre></div><p>注意：需要下载两个 loader</p>
|
||||
<h2 id="_2-功能介绍" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍" aria-hidden="true">#</a> 2. 功能介绍</h2>
|
||||
<ul>
|
||||
<li><code>css-loader</code>：负责将 Css 文件编译成 Webpack 能识别的模块</li>
|
||||
<li><code>style-loader</code>：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容</li>
|
||||
</ul>
|
||||
<p>此时样式就会以 Style 标签的形式在页面上生效</p>
|
||||
<h2 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h2 id="_4-添加-css-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-css-资源" aria-hidden="true">#</a> 4. 添加 Css 资源</h2>
|
||||
<ul>
|
||||
<li>src/css/index.css</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box1</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 准备一个使用样式的 DOM 容器 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="_5-运行指令" tabindex="-1"><a class="header-anchor" href="#_5-运行指令" aria-hidden="true">#</a> 5. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
</template>
|
||||
55
docs/.vuepress/.temp/pages/base/5.html.js
Normal file
55
docs/.vuepress/.temp/pages/base/5.html.js
Normal file
@@ -0,0 +1,55 @@
|
||||
export const data = {
|
||||
"key": "v-6c177e29",
|
||||
"path": "/base/5.html",
|
||||
"title": "处理 Less 资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 添加 Less 资源",
|
||||
"slug": "_4-添加-less-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/5.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
72
docs/.vuepress/.temp/pages/base/5.html.vue
Normal file
72
docs/.vuepress/.temp/pages/base/5.html.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template><h1 id="处理-less-资源" tabindex="-1"><a class="header-anchor" href="#处理-less-资源" aria-hidden="true">#</a> 处理 Less 资源</h1>
|
||||
<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i less-loader -D
|
||||
</code></pre></div><h2 id="_2-功能介绍" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍" aria-hidden="true">#</a> 2. 功能介绍</h2>
|
||||
<ul>
|
||||
<li><code>less-loader</code>：负责将 Less 文件编译成 Css 文件</li>
|
||||
</ul>
|
||||
<h2 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="_4-添加-less-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-less-资源" aria-hidden="true">#</a> 4. 添加 Less 资源</h2>
|
||||
<ul>
|
||||
<li>src/less/index.less</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="_5-运行指令" tabindex="-1"><a class="header-anchor" href="#_5-运行指令" aria-hidden="true">#</a> 5. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/base/6.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/6.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-6dcc56c8",
|
||||
"path": "/base/6.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/6.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/base/6.html.vue
Normal file
1
docs/.vuepress/.temp/pages/base/6.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
24
docs/.vuepress/.temp/pages/base/7.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/7.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-6f812f67",
|
||||
"path": "/base/7.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/7.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/base/7.html.vue
Normal file
1
docs/.vuepress/.temp/pages/base/7.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
61
docs/.vuepress/.temp/pages/base/8.html.js
Normal file
61
docs/.vuepress/.temp/pages/base/8.html.js
Normal file
@@ -0,0 +1,61 @@
|
||||
export const data = {
|
||||
"key": "v-71360806",
|
||||
"path": "/base/8.html",
|
||||
"title": "处理图片资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 配置",
|
||||
"slug": "_1-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 添加图片资源",
|
||||
"slug": "_2-添加图片资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 使用图片资源",
|
||||
"slug": "_3-使用图片资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 运行指令",
|
||||
"slug": "_4-运行指令",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "5. 输出资源情况",
|
||||
"slug": "_5-输出资源情况",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "6. 对图片资源进行优化",
|
||||
"slug": "_6-对图片资源进行优化",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/8.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
84
docs/.vuepress/.temp/pages/base/8.html.vue
Normal file
84
docs/.vuepress/.temp/pages/base/8.html.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template><h1 id="处理图片资源" tabindex="-1"><a class="header-anchor" href="#处理图片资源" aria-hidden="true">#</a> 处理图片资源</h1>
|
||||
<p>过去在 Webpack4 时，我们处理图片资源通过 <code>file-loader</code> 和 <code>url-loader</code> 进行处理</p>
|
||||
<p>现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源</p>
|
||||
<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token comment">// 省略之前的 Loader</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="_2-添加图片资源" tabindex="-1"><a class="header-anchor" href="#_2-添加图片资源" aria-hidden="true">#</a> 2. 添加图片资源</h2>
|
||||
<ul>
|
||||
<li>src/imgs/1.png</li>
|
||||
<li>src/imgs/2.gif</li>
|
||||
<li>src/imgs/3.jpeg</li>
|
||||
</ul>
|
||||
<h2 id="_3-使用图片资源" tabindex="-1"><a class="header-anchor" href="#_3-使用图片资源" aria-hidden="true">#</a> 3. 使用图片资源</h2>
|
||||
<ul>
|
||||
<li>src/less/index.less</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../imgs/2.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||||
<span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul>
|
||||
<li>src/sass/index.sass</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code>.box3
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px
|
||||
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../imgs/1.png"</span><span class="token punctuation">)</span></span>
|
||||
<span class="token property">background-size</span><span class="token punctuation">:</span> cover
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/styl/index.styl</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code>.box5
|
||||
width 100px
|
||||
height 100px
|
||||
background-image <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../imgs/3.jpeg"</span><span class="token punctuation">)</span></span>
|
||||
background-size cover
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
<h2 id="_5-输出资源情况" tabindex="-1"><a class="header-anchor" href="#_5-输出资源情况" aria-hidden="true">#</a> 5. 输出资源情况</h2>
|
||||
<p>此时如果查看 dist 目录的话，会发现多了三张图片资源</p>
|
||||
<p>因为 Webpack 会将所有打包好的资源输出到 dist 目录下</p>
|
||||
<ul>
|
||||
<li>为什么样式资源没有呢？</li>
|
||||
</ul>
|
||||
<p>因为经过 <code>style-loader</code> 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来</p>
|
||||
<h2 id="_6-对图片资源进行优化" tabindex="-1"><a class="header-anchor" href="#_6-对图片资源进行优化" aria-hidden="true">#</a> 6. 对图片资源进行优化</h2>
|
||||
<p>将小于某个大小的图片转化成 data URI 形式（Base64 格式）</p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token comment">// 小于40kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul>
|
||||
<li>优点：减少请求数量</li>
|
||||
<li>缺点：体积变得更大</li>
|
||||
</ul>
|
||||
<p>此时输出的图片文件就只有一张，其他图片以 data URI 形式内置到 js 中了
|
||||
（注意：需要将上次打包生成的文件清空，再重新打包才有效果）</p>
|
||||
</template>
|
||||
43
docs/.vuepress/.temp/pages/base/9.html.js
Normal file
43
docs/.vuepress/.temp/pages/base/9.html.js
Normal file
@@ -0,0 +1,43 @@
|
||||
export const data = {
|
||||
"key": "v-72eae0a5",
|
||||
"path": "/base/9.html",
|
||||
"title": "修改输出资源的名称和路径",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 配置",
|
||||
"slug": "_1-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 修改 index.html",
|
||||
"slug": "_2-修改-index-html",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 运行指令",
|
||||
"slug": "_3-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/9.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
68
docs/.vuepress/.temp/pages/base/9.html.vue
Normal file
68
docs/.vuepress/.temp/pages/base/9.html.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template><h1 id="修改输出资源的名称和路径" tabindex="-1"><a class="header-anchor" href="#修改输出资源的名称和路径" aria-hidden="true">#</a> 修改输出资源的名称和路径</h1>
|
||||
<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token comment">// 省略其他 Loader</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于40kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h2 id="_2-修改-index-html" tabindex="-1"><a class="header-anchor" href="#_2-修改-index-html" aria-hidden="true">#</a> 2. 修改 index.html</h2>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 修改 js 资源路径 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/static/js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="_3-运行指令" tabindex="-1"><a class="header-anchor" href="#_3-运行指令" aria-hidden="true">#</a> 3. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><ul>
|
||||
<li>此时输出文件目录：</li>
|
||||
</ul>
|
||||
<p>（注意：需要将上次打包生成的文件清空，再重新打包才有效果）</p>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>├── dist
|
||||
└── static
|
||||
├── imgs
|
||||
│ └── 7003350e.png
|
||||
└── js
|
||||
└── main.js
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></template>
|
||||
74
docs/.vuepress/.temp/pages/base/base.html.js
Normal file
74
docs/.vuepress/.temp/pages/base/base.html.js
Normal file
@@ -0,0 +1,74 @@
|
||||
export const data = {
|
||||
"key": "v-a6cc4bba",
|
||||
"path": "/base/base.html",
|
||||
"title": "基本使用",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "功能介绍",
|
||||
"slug": "功能介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "开始使用",
|
||||
"slug": "开始使用",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 资源目录",
|
||||
"slug": "_1-资源目录",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 创建文件",
|
||||
"slug": "_2-创建文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 下载依赖",
|
||||
"slug": "_3-下载依赖",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 启用 Webpack",
|
||||
"slug": "_4-启用-webpack",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 观察输出文件",
|
||||
"slug": "_5-观察输出文件",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "小结",
|
||||
"slug": "小结",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/base.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
70
docs/.vuepress/.temp/pages/base/base.html.vue
Normal file
70
docs/.vuepress/.temp/pages/base/base.html.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template><h1 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用" aria-hidden="true">#</a> 基本使用</h1>
|
||||
<p><strong><code>Webpack</code> 是一个静态资源打包工具。</strong></p>
|
||||
<p>它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。</p>
|
||||
<p>输出的文件就是编译好的文件，就可以在浏览器段运行了。</p>
|
||||
<p>我们将 <code>Webpack</code> 输出的文件叫做 <code>bundle</code>。</p>
|
||||
<h2 id="功能介绍" tabindex="-1"><a class="header-anchor" href="#功能介绍" aria-hidden="true">#</a> 功能介绍</h2>
|
||||
<p>Webpack 本身功能是有限的:</p>
|
||||
<ul>
|
||||
<li>开发模式：仅能编译 JS 中的 <code>ES Module</code> 语法</li>
|
||||
<li>生产模式：能编译 JS 中的 <code>ES Module</code> 语法，还能压缩 JS 代码</li>
|
||||
</ul>
|
||||
<h2 id="开始使用" tabindex="-1"><a class="header-anchor" href="#开始使用" aria-hidden="true">#</a> 开始使用</h2>
|
||||
<h3 id="_1-资源目录" tabindex="-1"><a class="header-anchor" href="#_1-资源目录" aria-hidden="true">#</a> 1. 资源目录</h3>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>webpack_code # 项目根目录（所有指令必须在这个目录运行）
|
||||
└── src # 项目源码目录
|
||||
├── js # js文件目录
|
||||
│ ├── count.js
|
||||
│ └── sum.js
|
||||
└── main.js # 项目主文件
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_2-创建文件" tabindex="-1"><a class="header-anchor" href="#_2-创建文件" aria-hidden="true">#</a> 2. 创建文件</h3>
|
||||
<ul>
|
||||
<li>count.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> x <span class="token operator">-</span> y<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
|
||||
<li>sum.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token operator">=></span> p <span class="token operator">+</span> c<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
|
||||
<li>main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_3-下载依赖" tabindex="-1"><a class="header-anchor" href="#_3-下载依赖" aria-hidden="true">#</a> 3. 下载依赖</h3>
|
||||
<p>打开终端，来到项目根目录。运行以下指令：</p>
|
||||
<ul>
|
||||
<li>初始化<code>package.json</code></li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm init -y
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>此时会生成一个基础的 <code>package.json</code> 文件。</p>
|
||||
<p><strong>需要注意的是 <code>package.json</code> 中 <code>name</code> 字段不能叫做 <code>webpack</code>, 否则下一步会报错</strong></p>
|
||||
<ul>
|
||||
<li>下载依赖</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm i webpack webpack-cli -D
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="_4-启用-webpack" tabindex="-1"><a class="header-anchor" href="#_4-启用-webpack" aria-hidden="true">#</a> 4. 启用 Webpack</h3>
|
||||
<ul>
|
||||
<li>开发模式</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=development
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul>
|
||||
<li>生产模式</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=production
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><code>npx webpack</code>: 是用来运行本地安装 <code>Webpack</code> 包的。</p>
|
||||
<p><code>./src/main.js</code>: 指定 <code>Webpack</code> 从 <code>main.js</code> 文件开始打包，不但会打包 <code>main.js</code>，还会将其依赖也一起打包进来。</p>
|
||||
<p><code>--mode=xxx</code>：指定模式（环境）。</p>
|
||||
<h3 id="_5-观察输出文件" tabindex="-1"><a class="header-anchor" href="#_5-观察输出文件" aria-hidden="true">#</a> 5. 观察输出文件</h3>
|
||||
<p>默认 <code>Webpack</code> 会将文件打包输出到 <code>dist</code> 目录下，我们查看 <code>dist</code> 目录下文件情况就好了</p>
|
||||
<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
|
||||
<p><code>Webpack</code> 本身功能比较少，只能处理 <code>js</code> 资源，一旦遇到 <code>css</code> 等其他资源就会报错。</p>
|
||||
<p>所以我们学习 <code>Webpack</code>，就是主要学习如何处理其他资源。</p>
|
||||
</template>
|
||||
37
docs/.vuepress/.temp/pages/base/clean.html.js
Normal file
37
docs/.vuepress/.temp/pages/base/clean.html.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export const data = {
|
||||
"key": "v-21f1ba15",
|
||||
"path": "/base/clean.html",
|
||||
"title": "自动清空上次打包资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 配置",
|
||||
"slug": "_1-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 运行指令",
|
||||
"slug": "_2-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/clean.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
57
docs/.vuepress/.temp/pages/base/clean.html.vue
Normal file
57
docs/.vuepress/.temp/pages/base/clean.html.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template><h1 id="自动清空上次打包资源" tabindex="-1"><a class="header-anchor" href="#自动清空上次打包资源" aria-hidden="true">#</a> 自动清空上次打包资源</h1>
|
||||
<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于40kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br></div></div><h2 id="_2-运行指令" tabindex="-1"><a class="header-anchor" href="#_2-运行指令" aria-hidden="true">#</a> 2. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>观察 dist 目录资源情况</p>
|
||||
</template>
|
||||
49
docs/.vuepress/.temp/pages/base/config.html.js
Normal file
49
docs/.vuepress/.temp/pages/base/config.html.js
Normal file
@@ -0,0 +1,49 @@
|
||||
export const data = {
|
||||
"key": "v-e703ecdc",
|
||||
"path": "/base/config.html",
|
||||
"title": "基本配置",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "5 大核心概念",
|
||||
"slug": "_5-大核心概念",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "准备 Webpack 配置文件",
|
||||
"slug": "准备-webpack-配置文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "修改配置文件",
|
||||
"slug": "修改配置文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "小结",
|
||||
"slug": "小结",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/config.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
82
docs/.vuepress/.temp/pages/base/config.html.vue
Normal file
82
docs/.vuepress/.temp/pages/base/config.html.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template><h1 id="基本配置" tabindex="-1"><a class="header-anchor" href="#基本配置" aria-hidden="true">#</a> 基本配置</h1>
|
||||
<p>在开始使用 <code>Webpack</code> 之前，我们需要对 <code>Webpack</code> 的配置有一定的认识。</p>
|
||||
<h2 id="_5-大核心概念" tabindex="-1"><a class="header-anchor" href="#_5-大核心概念" aria-hidden="true">#</a> 5 大核心概念</h2>
|
||||
<ol>
|
||||
<li>entry（入口）</li>
|
||||
</ol>
|
||||
<p>指示 Webpack 从哪个文件开始打包</p>
|
||||
<ol start="2">
|
||||
<li>output（输出）</li>
|
||||
</ol>
|
||||
<p>指示 Webpack 打包完的文件输出到哪里去，如何命名等</p>
|
||||
<ol start="3">
|
||||
<li>loader（加载器）</li>
|
||||
</ol>
|
||||
<p>webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析</p>
|
||||
<ol start="4">
|
||||
<li>plugins（插件）</li>
|
||||
</ol>
|
||||
<p>扩展 Webpack 的功能</p>
|
||||
<ol start="5">
|
||||
<li>mode（模式）</li>
|
||||
</ol>
|
||||
<p>主要由两种模式：</p>
|
||||
<ul>
|
||||
<li>开发模式：development</li>
|
||||
<li>生产模式：production</li>
|
||||
</ul>
|
||||
<h2 id="准备-webpack-配置文件" tabindex="-1"><a class="header-anchor" href="#准备-webpack-配置文件" aria-hidden="true">#</a> 准备 Webpack 配置文件</h2>
|
||||
<p>在项目根目录下新建文件：<code>webpack.config.js</code></p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 入口</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 输出</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 加载器</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 插件</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 模式</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范</p>
|
||||
<h2 id="修改配置文件" tabindex="-1"><a class="header-anchor" href="#修改配置文件" aria-hidden="true">#</a> 修改配置文件</h2>
|
||||
<ol>
|
||||
<li>配置文件</li>
|
||||
</ol>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// Node.js的核心模块，专门用来处理文件路径</span>
|
||||
<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 入口</span>
|
||||
<span class="token comment">// 相对路径和绝对路径都行</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 输出</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// path: 文件输出目录，必须是绝对路径</span>
|
||||
<span class="token comment">// path.resolve()方法返回一个绝对路径</span>
|
||||
<span class="token comment">// __dirname 当前文件的文件夹绝对路径</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// filename: 输出文件名</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 加载器</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 插件</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 模式</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span> <span class="token comment">// 开发模式</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><ol start="2">
|
||||
<li>运行指令</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>此时功能和之前一样，也不能处理样式资源</p>
|
||||
<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
|
||||
<p>Webpack 将来都通过 <code>webpack.config.js</code> 文件进行配置，来增强 Webpack 的功能</p>
|
||||
<p>我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式</p>
|
||||
</template>
|
||||
179
docs/.vuepress/.temp/pages/base/css.html.js
Normal file
179
docs/.vuepress/.temp/pages/base/css.html.js
Normal file
@@ -0,0 +1,179 @@
|
||||
export const data = {
|
||||
"key": "v-80c5304a",
|
||||
"path": "/base/css.html",
|
||||
"title": "处理样式资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "介绍",
|
||||
"slug": "介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "处理 Css 资源",
|
||||
"slug": "处理-css-资源",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 添加 Css 资源",
|
||||
"slug": "_4-添加-css-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "处理 Less 资源",
|
||||
"slug": "处理-less-资源",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 添加 Less 资源",
|
||||
"slug": "_4-添加-less-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令-1",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "处理 Sass 和 Scss 资源",
|
||||
"slug": "处理-sass-和-scss-资源",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包-2",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍-2",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置-2",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 添加 Sass 资源",
|
||||
"slug": "_4-添加-sass-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令-2",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "处理 Styl 资源",
|
||||
"slug": "处理-styl-资源",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包-3",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 功能介绍",
|
||||
"slug": "_2-功能介绍-3",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置-3",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 添加 Styl 资源",
|
||||
"slug": "_4-添加-styl-资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令-3",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/css.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
337
docs/.vuepress/.temp/pages/base/css.html.vue
Normal file
337
docs/.vuepress/.temp/pages/base/css.html.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template><h1 id="处理样式资源" tabindex="-1"><a class="header-anchor" href="#处理样式资源" aria-hidden="true">#</a> 处理样式资源</h1>
|
||||
<p>本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源</p>
|
||||
<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2>
|
||||
<p>Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源</p>
|
||||
<p>我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用</p>
|
||||
<p>官方文档找不到的话，可以从社区 Github 中搜索查询</p>
|
||||
<p><a href="https://webpack.docschina.org/loaders/" target="_blank" rel="noopener noreferrer">Webpack 官方 Loader 文档<ExternalLinkIcon/></a></p>
|
||||
<h2 id="处理-css-资源" tabindex="-1"><a class="header-anchor" href="#处理-css-资源" aria-hidden="true">#</a> 处理 Css 资源</h2>
|
||||
<h3 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i css-loader style-loader -D
|
||||
</code></pre></div><p>注意：需要下载两个 loader</p>
|
||||
<h3 id="_2-功能介绍" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍" aria-hidden="true">#</a> 2. 功能介绍</h3>
|
||||
<ul>
|
||||
<li><code>css-loader</code>：负责将 Css 文件编译成 Webpack 能识别的模块</li>
|
||||
<li><code>style-loader</code>：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容</li>
|
||||
</ul>
|
||||
<p>此时样式就会以 Style 标签的形式在页面上生效</p>
|
||||
<h3 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="_4-添加-css-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-css-资源" aria-hidden="true">#</a> 4. 添加 Css 资源</h3>
|
||||
<ul>
|
||||
<li>src/css/index.css</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box1</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 准备一个使用样式的 DOM 容器 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 引入打包后的js文件，才能看到效果 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="_5-运行指令" tabindex="-1"><a class="header-anchor" href="#_5-运行指令" aria-hidden="true">#</a> 5. 运行指令</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
<h2 id="处理-less-资源" tabindex="-1"><a class="header-anchor" href="#处理-less-资源" aria-hidden="true">#</a> 处理 Less 资源</h2>
|
||||
<h3 id="_1-下载包-1" tabindex="-1"><a class="header-anchor" href="#_1-下载包-1" aria-hidden="true">#</a> 1. 下载包</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i less-loader -D
|
||||
</code></pre></div><h3 id="_2-功能介绍-1" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-1" aria-hidden="true">#</a> 2. 功能介绍</h3>
|
||||
<ul>
|
||||
<li><code>less-loader</code>：负责将 Less 文件编译成 Css 文件</li>
|
||||
</ul>
|
||||
<h3 id="_3-配置-1" tabindex="-1"><a class="header-anchor" href="#_3-配置-1" aria-hidden="true">#</a> 3. 配置</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="_4-添加-less-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-less-资源" aria-hidden="true">#</a> 4. 添加 Less 资源</h3>
|
||||
<ul>
|
||||
<li>src/less/index.less</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_5-运行指令-1" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-1" aria-hidden="true">#</a> 5. 运行指令</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
<h2 id="处理-sass-和-scss-资源" tabindex="-1"><a class="header-anchor" href="#处理-sass-和-scss-资源" aria-hidden="true">#</a> 处理 Sass 和 Scss 资源</h2>
|
||||
<h3 id="_1-下载包-2" tabindex="-1"><a class="header-anchor" href="#_1-下载包-2" aria-hidden="true">#</a> 1. 下载包</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i sass-loader sass -D
|
||||
</code></pre></div><p>注意：需要下载两个</p>
|
||||
<h3 id="_2-功能介绍-2" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-2" aria-hidden="true">#</a> 2. 功能介绍</h3>
|
||||
<ul>
|
||||
<li><code>sass-loader</code>：负责将 Sass 文件编译成 css 文件</li>
|
||||
<li><code>sass</code>：<code>sass-loader</code> 依赖 <code>sass</code> 进行编译</li>
|
||||
</ul>
|
||||
<h3 id="_3-配置-2" tabindex="-1"><a class="header-anchor" href="#_3-配置-2" aria-hidden="true">#</a> 3. 配置</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h3 id="_4-添加-sass-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-sass-资源" aria-hidden="true">#</a> 4. 添加 Sass 资源</h3>
|
||||
<ul>
|
||||
<li>src/sass/index.sass</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 可以省略大括号和分号 */</span>
|
||||
.box3
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> hotpink
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/sass/index.scss</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box4</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> lightpink<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="_5-运行指令-2" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-2" aria-hidden="true">#</a> 5. 运行指令</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
<h2 id="处理-styl-资源" tabindex="-1"><a class="header-anchor" href="#处理-styl-资源" aria-hidden="true">#</a> 处理 Styl 资源</h2>
|
||||
<h3 id="_1-下载包-3" tabindex="-1"><a class="header-anchor" href="#_1-下载包-3" aria-hidden="true">#</a> 1. 下载包</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i stylus-loader -D
|
||||
</code></pre></div><h3 id="_2-功能介绍-3" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-3" aria-hidden="true">#</a> 2. 功能介绍</h3>
|
||||
<ul>
|
||||
<li><code>stylus-loader</code>：负责将 Styl 文件编译成 Css 文件</li>
|
||||
</ul>
|
||||
<h3 id="_3-配置-3" tabindex="-1"><a class="header-anchor" href="#_3-配置-3" aria-hidden="true">#</a> 3. 配置</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h3 id="_4-添加-styl-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-styl-资源" aria-hidden="true">#</a> 4. 添加 Styl 资源</h3>
|
||||
<ul>
|
||||
<li>src/styl/index.styl</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 可以省略大括号、分号、冒号 */</span>
|
||||
.box
|
||||
width 100px
|
||||
height 100px
|
||||
background-color pink
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 准备一个使用样式的 DOM 容器 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_5-运行指令-3" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-3" aria-hidden="true">#</a> 5. 运行指令</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/base/development.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/development.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-34029aa3",
|
||||
"path": "/base/development.html",
|
||||
"title": "开发模式介绍",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/development.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
13
docs/.vuepress/.temp/pages/base/development.html.vue
Normal file
13
docs/.vuepress/.temp/pages/base/development.html.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template><h1 id="开发模式介绍" tabindex="-1"><a class="header-anchor" href="#开发模式介绍" aria-hidden="true">#</a> 开发模式介绍</h1>
|
||||
<p>开发模式顾名思义就是我们开发代码时使用的模式。</p>
|
||||
<p>这个模式下我们主要做两件事：</p>
|
||||
<ol>
|
||||
<li>编译代码，使浏览器能识别运行</li>
|
||||
</ol>
|
||||
<p>开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源</p>
|
||||
<ol start="2">
|
||||
<li>代码质量检查，树立代码规范</li>
|
||||
</ol>
|
||||
<p>提前检查代码的一些隐患，让代码运行时能更加健壮。</p>
|
||||
<p>提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。</p>
|
||||
</template>
|
||||
49
docs/.vuepress/.temp/pages/base/font.html.js
Normal file
49
docs/.vuepress/.temp/pages/base/font.html.js
Normal file
@@ -0,0 +1,49 @@
|
||||
export const data = {
|
||||
"key": "v-85d4d936",
|
||||
"path": "/base/font.html",
|
||||
"title": "处理字体图标资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载字体图标文件",
|
||||
"slug": "_1-下载字体图标文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 添加字体图标资源",
|
||||
"slug": "_2-添加字体图标资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 配置",
|
||||
"slug": "_3-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 运行指令",
|
||||
"slug": "_4-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/font.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
137
docs/.vuepress/.temp/pages/base/font.html.vue
Normal file
137
docs/.vuepress/.temp/pages/base/font.html.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template><h1 id="处理字体图标资源" tabindex="-1"><a class="header-anchor" href="#处理字体图标资源" aria-hidden="true">#</a> 处理字体图标资源</h1>
|
||||
<h2 id="_1-下载字体图标文件" tabindex="-1"><a class="header-anchor" href="#_1-下载字体图标文件" aria-hidden="true">#</a> 1. 下载字体图标文件</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>打开<a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">阿里巴巴矢量图标库<ExternalLinkIcon/></a></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>选择想要的图标添加到购物车，统一下载到本地</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h2 id="_2-添加字体图标资源" tabindex="-1"><a class="header-anchor" href="#_2-添加字体图标资源" aria-hidden="true">#</a> 2. 添加字体图标资源</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>src/fonts/iconfont.ttf</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>src/fonts/iconfont.woff</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>src/fonts/iconfont.woff2</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>src/css/iconfont.css</p>
|
||||
<ul>
|
||||
<li>注意字体文件路径需要修改</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<p>src/main.js</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ul>
|
||||
<li>public/index.html</li>
|
||||
</ul>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 使用字体图标 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-arrow-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-ashbin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-browse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/static/js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br></div></div><p><code>type: "asset/resource"</code>和<code>type: "asset"</code>的区别：</p>
|
||||
<ol>
|
||||
<li><code>type: "asset/resource"</code> 相当于<code>file-loader</code>, 将文件转化成 Webpack 能识别的资源，其他不做处理</li>
|
||||
<li><code>type: "asset"</code> 相当于<code>url-loader</code>, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式</li>
|
||||
</ol>
|
||||
<h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
</template>
|
||||
49
docs/.vuepress/.temp/pages/base/html.html.js
Normal file
49
docs/.vuepress/.temp/pages/base/html.html.js
Normal file
@@ -0,0 +1,49 @@
|
||||
export const data = {
|
||||
"key": "v-ab115cee",
|
||||
"path": "/base/html.html",
|
||||
"title": "处理 Html 资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 修改 index.html",
|
||||
"slug": "_3-修改-index-html",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 运行指令",
|
||||
"slug": "_4-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/html.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
108
docs/.vuepress/.temp/pages/base/html.html.vue
Normal file
108
docs/.vuepress/.temp/pages/base/html.html.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template><h1 id="处理-html-资源" tabindex="-1"><a class="header-anchor" href="#处理-html-资源" aria-hidden="true">#</a> 处理 Html 资源</h1>
|
||||
<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i html-webpack-plugin -D
|
||||
</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
|
||||
<ul>
|
||||
<li>webpack.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
|
||||
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 以 public/index.html 为模板创建文件</span>
|
||||
<span class="token comment">// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源</span>
|
||||
<span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br></div></div><h2 id="_3-修改-index-html" tabindex="-1"><a class="header-anchor" href="#_3-修改-index-html" aria-hidden="true">#</a> 3. 修改 index.html</h2>
|
||||
<p>去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入</p>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-arrow-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-ashbin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-browse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>此时 dist 目录就会输出一个 index.html 文件</p>
|
||||
</template>
|
||||
61
docs/.vuepress/.temp/pages/base/image.html.js
Normal file
61
docs/.vuepress/.temp/pages/base/image.html.js
Normal file
@@ -0,0 +1,61 @@
|
||||
export const data = {
|
||||
"key": "v-03183b7a",
|
||||
"path": "/base/image.html",
|
||||
"title": "处理图片资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 配置",
|
||||
"slug": "_1-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 添加图片资源",
|
||||
"slug": "_2-添加图片资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 使用图片资源",
|
||||
"slug": "_3-使用图片资源",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "4. 运行指令",
|
||||
"slug": "_4-运行指令",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "5. 输出资源情况",
|
||||
"slug": "_5-输出资源情况",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "6. 对图片资源进行优化",
|
||||
"slug": "_6-对图片资源进行优化",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/image.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
134
docs/.vuepress/.temp/pages/base/image.html.vue
Normal file
134
docs/.vuepress/.temp/pages/base/image.html.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template><h1 id="处理图片资源" tabindex="-1"><a class="header-anchor" href="#处理图片资源" aria-hidden="true">#</a> 处理图片资源</h1>
|
||||
<p>过去在 Webpack4 时，我们处理图片资源通过 <code>file-loader</code> 和 <code>url-loader</code> 进行处理</p>
|
||||
<p>现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源</p>
|
||||
<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><h2 id="_2-添加图片资源" tabindex="-1"><a class="header-anchor" href="#_2-添加图片资源" aria-hidden="true">#</a> 2. 添加图片资源</h2>
|
||||
<ul>
|
||||
<li>src/images/1.jpeg</li>
|
||||
<li>src/images/2.png</li>
|
||||
<li>src/images/3.gif</li>
|
||||
</ul>
|
||||
<h2 id="_3-使用图片资源" tabindex="-1"><a class="header-anchor" href="#_3-使用图片资源" aria-hidden="true">#</a> 3. 使用图片资源</h2>
|
||||
<ul>
|
||||
<li>src/less/index.less</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
|
||||
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../images/1.jpeg"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||||
<span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul>
|
||||
<li>src/sass/index.sass</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code>.box3
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 100px
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100px
|
||||
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../images/2.png"</span><span class="token punctuation">)</span></span>
|
||||
<span class="token property">background-size</span><span class="token punctuation">:</span> cover
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
|
||||
<li>src/styl/index.styl</li>
|
||||
</ul>
|
||||
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code>.box5
|
||||
width 100px
|
||||
height 100px
|
||||
background-image <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../images/3.gif"</span><span class="token punctuation">)</span></span>
|
||||
background-size cover
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
<h2 id="_5-输出资源情况" tabindex="-1"><a class="header-anchor" href="#_5-输出资源情况" aria-hidden="true">#</a> 5. 输出资源情况</h2>
|
||||
<p>此时如果查看 dist 目录的话，会发现多了三张图片资源</p>
|
||||
<p>因为 Webpack 会将所有打包好的资源输出到 dist 目录下</p>
|
||||
<ul>
|
||||
<li>为什么样式资源没有呢？</li>
|
||||
</ul>
|
||||
<p>因为经过 <code>style-loader</code> 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来</p>
|
||||
<h2 id="_6-对图片资源进行优化" tabindex="-1"><a class="header-anchor" href="#_6-对图片资源进行优化" aria-hidden="true">#</a> 6. 对图片资源进行优化</h2>
|
||||
<p>将小于某个大小的图片转化成 data URI 形式（Base64 格式）</p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><ul>
|
||||
<li>优点：减少请求数量</li>
|
||||
<li>缺点：体积变得更大</li>
|
||||
</ul>
|
||||
<p>此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了
|
||||
（注意：需要将上次打包生成的文件清空，再重新打包才有效果）</p>
|
||||
</template>
|
||||
37
docs/.vuepress/.temp/pages/base/index.html.js
Normal file
37
docs/.vuepress/.temp/pages/base/index.html.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export const data = {
|
||||
"key": "v-1455d425",
|
||||
"path": "/base/",
|
||||
"title": "前言",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "为什么需要打包工具？",
|
||||
"slug": "为什么需要打包工具",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "有哪些打包工具？",
|
||||
"slug": "有哪些打包工具",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/README.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
18
docs/.vuepress/.temp/pages/base/index.html.vue
Normal file
18
docs/.vuepress/.temp/pages/base/index.html.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template><h1 id="前言" tabindex="-1"><a class="header-anchor" href="#前言" aria-hidden="true">#</a> 前言</h1>
|
||||
<h2 id="为什么需要打包工具" tabindex="-1"><a class="header-anchor" href="#为什么需要打包工具" aria-hidden="true">#</a> 为什么需要打包工具？</h2>
|
||||
<p>开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。</p>
|
||||
<p>这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。</p>
|
||||
<p>所以我们需要打包工具帮我们做完这些事。</p>
|
||||
<p>除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。</p>
|
||||
<h2 id="有哪些打包工具" tabindex="-1"><a class="header-anchor" href="#有哪些打包工具" aria-hidden="true">#</a> 有哪些打包工具？</h2>
|
||||
<ul>
|
||||
<li>Grunt</li>
|
||||
<li>Gulp</li>
|
||||
<li>Parcel</li>
|
||||
<li>Webpack</li>
|
||||
<li>Rollup</li>
|
||||
<li>Vite</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
<p>目前市面上最流量的是 Webpack，所以我们主要以 Webpack 来介绍使用打包工具</p>
|
||||
</template>
|
||||
74
docs/.vuepress/.temp/pages/base/intro.html.js
Normal file
74
docs/.vuepress/.temp/pages/base/intro.html.js
Normal file
@@ -0,0 +1,74 @@
|
||||
export const data = {
|
||||
"key": "v-c138b05c",
|
||||
"path": "/base/intro.html",
|
||||
"title": "基本使用",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "功能介绍",
|
||||
"slug": "功能介绍",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "开始使用",
|
||||
"slug": "开始使用",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 资源目录",
|
||||
"slug": "_1-资源目录",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 创建文件",
|
||||
"slug": "_2-创建文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 下载依赖",
|
||||
"slug": "_3-下载依赖",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 启用 Webpack",
|
||||
"slug": "_4-启用-webpack",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 观察输出文件",
|
||||
"slug": "_5-观察输出文件",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "小结",
|
||||
"slug": "小结",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/intro.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
70
docs/.vuepress/.temp/pages/base/intro.html.vue
Normal file
70
docs/.vuepress/.temp/pages/base/intro.html.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template><h1 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用" aria-hidden="true">#</a> 基本使用</h1>
|
||||
<p><strong><code>Webpack</code> 是一个静态资源打包工具。</strong></p>
|
||||
<p>它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。</p>
|
||||
<p>输出的文件就是编译好的文件，就可以在浏览器段运行了。</p>
|
||||
<p>我们将 <code>Webpack</code> 输出的文件叫做 <code>bundle</code>。</p>
|
||||
<h2 id="功能介绍" tabindex="-1"><a class="header-anchor" href="#功能介绍" aria-hidden="true">#</a> 功能介绍</h2>
|
||||
<p>Webpack 本身功能是有限的:</p>
|
||||
<ul>
|
||||
<li>开发模式：仅能编译 JS 中的 <code>ES Module</code> 语法</li>
|
||||
<li>生产模式：能编译 JS 中的 <code>ES Module</code> 语法，还能压缩 JS 代码</li>
|
||||
</ul>
|
||||
<h2 id="开始使用" tabindex="-1"><a class="header-anchor" href="#开始使用" aria-hidden="true">#</a> 开始使用</h2>
|
||||
<h3 id="_1-资源目录" tabindex="-1"><a class="header-anchor" href="#_1-资源目录" aria-hidden="true">#</a> 1. 资源目录</h3>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>├── webpack_code # 项目根目录（所有指令必须在这个目录运行）
|
||||
│ ├── src # 项目源码目录
|
||||
│ │ ├── js # js文件目录
|
||||
│ │ │ ├── count.js
|
||||
│ │ │ └── sum.js
|
||||
│ │ └── main.js # 项目主文件
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_2-创建文件" tabindex="-1"><a class="header-anchor" href="#_2-创建文件" aria-hidden="true">#</a> 2. 创建文件</h3>
|
||||
<ul>
|
||||
<li>count.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> x <span class="token operator">-</span> y<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
|
||||
<li>sum.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token operator">=></span> p <span class="token operator">+</span> c<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
|
||||
<li>main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_3-下载依赖" tabindex="-1"><a class="header-anchor" href="#_3-下载依赖" aria-hidden="true">#</a> 3. 下载依赖</h3>
|
||||
<p>打开终端，来到项目根目录。运行以下指令：</p>
|
||||
<ul>
|
||||
<li>初始化<code>package.json</code></li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm init -y
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>此时会生成一个基础的 <code>package.json</code> 文件。</p>
|
||||
<p><strong>需要注意的是 <code>package.json</code> 中 <code>name</code> 字段不能叫做 <code>webpack</code>, 否则下一步会报错</strong></p>
|
||||
<ul>
|
||||
<li>下载依赖</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm i webpack webpack-cli -D
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="_4-启用-webpack" tabindex="-1"><a class="header-anchor" href="#_4-启用-webpack" aria-hidden="true">#</a> 4. 启用 Webpack</h3>
|
||||
<ul>
|
||||
<li>开发模式</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=development
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul>
|
||||
<li>生产模式</li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=production
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><code>npx webpack</code>: 是用来运行本地安装 <code>Webpack</code> 包的。</p>
|
||||
<p><code>./src/main.js</code>: 指定 <code>Webpack</code> 从 <code>main.js</code> 文件开始打包，不但会打包 <code>main.js</code>，还会将其依赖也一起打包进来。</p>
|
||||
<p><code>--mode=xxx</code>：指定模式（环境）。</p>
|
||||
<h3 id="_5-观察输出文件" tabindex="-1"><a class="header-anchor" href="#_5-观察输出文件" aria-hidden="true">#</a> 5. 观察输出文件</h3>
|
||||
<p>默认 <code>Webpack</code> 会将文件打包输出到 <code>dist</code> 目录下，我们查看 <code>dist</code> 目录下文件情况就好了</p>
|
||||
<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
|
||||
<p><code>Webpack</code> 本身功能比较少，只能处理 <code>js</code> 资源，一旦遇到 <code>css</code> 等其他资源就会报错。</p>
|
||||
<p>所以我们学习 <code>Webpack</code>，就是主要学习如何处理其他资源。</p>
|
||||
</template>
|
||||
81
docs/.vuepress/.temp/pages/base/javascript.html.js
Normal file
81
docs/.vuepress/.temp/pages/base/javascript.html.js
Normal file
@@ -0,0 +1,81 @@
|
||||
export const data = {
|
||||
"key": "v-0bd200c7",
|
||||
"path": "/base/javascript.html",
|
||||
"title": "处理 js 资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "Eslint",
|
||||
"slug": "eslint",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 配置文件",
|
||||
"slug": "_1-配置文件",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 具体配置",
|
||||
"slug": "_2-具体配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 在 Webpack 中使用",
|
||||
"slug": "_3-在-webpack-中使用",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. VSCode Eslint 插件",
|
||||
"slug": "_4-vscode-eslint-插件",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "Babel",
|
||||
"slug": "babel",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 配置文件",
|
||||
"slug": "_1-配置文件-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 具体配置",
|
||||
"slug": "_2-具体配置-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 在 Webpack 中使用",
|
||||
"slug": "_3-在-webpack-中使用-1",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/javascript.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
371
docs/.vuepress/.temp/pages/base/javascript.html.vue
Normal file
371
docs/.vuepress/.temp/pages/base/javascript.html.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template><h1 id="处理-js-资源" tabindex="-1"><a class="header-anchor" href="#处理-js-资源" aria-hidden="true">#</a> 处理 js 资源</h1>
|
||||
<p>有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？</p>
|
||||
<p>原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。</p>
|
||||
<p>其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。</p>
|
||||
<ul>
|
||||
<li>针对 js 兼容性处理，我们使用 Babel 来完成</li>
|
||||
<li>针对代码格式，我们使用 Eslint 来完成</li>
|
||||
</ul>
|
||||
<p>我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理</p>
|
||||
<h2 id="eslint" tabindex="-1"><a class="header-anchor" href="#eslint" aria-hidden="true">#</a> Eslint</h2>
|
||||
<p>可组装的 JavaScript 和 JSX 检查工具。</p>
|
||||
<p>这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能</p>
|
||||
<p>我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查</p>
|
||||
<h3 id="_1-配置文件" tabindex="-1"><a class="header-anchor" href="#_1-配置文件" aria-hidden="true">#</a> 1. 配置文件</h3>
|
||||
<p>配置文件由很多种写法：</p>
|
||||
<ul>
|
||||
<li><code>.eslintrc.*</code>：新建文件，位于项目根目录
|
||||
<ul>
|
||||
<li><code>.eslintrc</code></li>
|
||||
<li><code>.eslintrc.js</code></li>
|
||||
<li><code>.eslintrc.json</code></li>
|
||||
<li>区别在于配置格式不一样</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>package.json</code> 中 <code>eslintConfig</code>：不需要创建文件，在原有文件基础上写</li>
|
||||
</ul>
|
||||
<p>ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可</p>
|
||||
<h3 id="_2-具体配置" tabindex="-1"><a class="header-anchor" href="#_2-具体配置" aria-hidden="true">#</a> 2. 具体配置</h3>
|
||||
<p>我们以 <code>.eslintrc.js</code> 配置文件为例：</p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 解析选项</span>
|
||||
<span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 具体检查规则</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 继承其他规则</span>
|
||||
<span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token comment">// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol>
|
||||
<li>parserOptions 解析选项</li>
|
||||
</ol>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token comment">// ES 语法版本</span>
|
||||
<span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">"module"</span><span class="token punctuation">,</span> <span class="token comment">// ES 模块化</span>
|
||||
<span class="token literal-property property">ecmaFeatures</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// ES 其他特性</span>
|
||||
<span class="token literal-property property">jsx</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 如果是 React 项目，就需要开启 jsx 语法</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="2">
|
||||
<li>rules 具体规则</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li><code>"off"</code> 或 <code>0</code> - 关闭规则</li>
|
||||
<li><code>"warn"</code> 或 <code>1</code> - 开启规则，使用警告级别的错误：<code>warn</code> (不会导致程序退出)</li>
|
||||
<li><code>"error"</code> 或 <code>2</code> - 开启规则，使用错误级别的错误：<code>error</code> (当被触发的时候，程序会退出)</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">semi</span><span class="token operator">:</span> <span class="token string">"error"</span><span class="token punctuation">,</span> <span class="token comment">// 禁止使用分号</span>
|
||||
<span class="token string-property property">'array-callback-return'</span><span class="token operator">:</span> <span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 强制数组方法的回调函数中有 return 语句，否则警告</span>
|
||||
<span class="token string-property property">'default-case'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 要求 switch 语句中有 default 分支，否则警告</span>
|
||||
<span class="token punctuation">{</span> <span class="token literal-property property">commentPattern</span><span class="token operator">:</span> <span class="token string">'^no default$'</span> <span class="token punctuation">}</span> <span class="token comment">// 允许在最后注释 no default, 就不会有警告了</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">eqeqeq</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 强制使用 === 和 !==，否则警告</span>
|
||||
<span class="token string">'smart'</span> <span class="token comment">// https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>更多规则详见：<a href="https://eslint.bootcss.com/docs/rules/" target="_blank" rel="noopener noreferrer">规则文档<ExternalLinkIcon/></a></p>
|
||||
<ol start="3">
|
||||
<li>extends 继承</li>
|
||||
</ol>
|
||||
<p>开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。</p>
|
||||
<p>现有以下较为有名的规则：</p>
|
||||
<ul>
|
||||
<li><a href="https://eslint.bootcss.com/docs/rules/" target="_blank" rel="noopener noreferrer">Eslint 官方的规则<ExternalLinkIcon/></a>：<code>eslint:recommended</code></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint" target="_blank" rel="noopener noreferrer">Vue Cli 官方的规则<ExternalLinkIcon/></a>：<code>plugin:vue/essential</code></li>
|
||||
<li><a href="https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app" target="_blank" rel="noopener noreferrer">React Cli 官方的规则<ExternalLinkIcon/></a>：<code>react-app</code></li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 例如在React项目中，我们可以这样写配置</span>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"react-app"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 我们的规则会覆盖掉react-app的规则</span>
|
||||
<span class="token comment">// 所以想要修改规则直接改就是了</span>
|
||||
<span class="token literal-property property">eqeqeq</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"warn"</span><span class="token punctuation">,</span> <span class="token string">"smart"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="_3-在-webpack-中使用" tabindex="-1"><a class="header-anchor" href="#_3-在-webpack-中使用" aria-hidden="true">#</a> 3. 在 Webpack 中使用</h3>
|
||||
<ol>
|
||||
<li>下载包</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i eslint-webpack-plugin eslint -D
|
||||
</code></pre></div><ol start="2">
|
||||
<li>定义 Eslint 配置文件</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>.eslintrc.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 继承 Eslint 规则</span>
|
||||
<span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"eslint:recommended"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">node</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 启用node中全局变量</span>
|
||||
<span class="token literal-property property">browser</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 启用浏览器中全局变量</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">"module"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string-property property">"no-var"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 不能使用 var 定义变量</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ol start="3">
|
||||
<li>修改 js 文件代码</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">var</span> result1 <span class="token operator">=</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result1<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">var</span> result2 <span class="token operator">=</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result2<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ol>
|
||||
<li>配置</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>webpack.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><ol start="5">
|
||||
<li>运行指令</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>在控制台查看 Eslint 检查效果</p>
|
||||
<h3 id="_4-vscode-eslint-插件" tabindex="-1"><a class="header-anchor" href="#_4-vscode-eslint-插件" aria-hidden="true">#</a> 4. VSCode Eslint 插件</h3>
|
||||
<p>打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决</p>
|
||||
<p>但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。</p>
|
||||
<p>所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:</p>
|
||||
<ul>
|
||||
<li><code>.eslintignore</code></li>
|
||||
</ul>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code># 忽略dist目录下所有文件
|
||||
dist
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="babel" tabindex="-1"><a class="header-anchor" href="#babel" aria-hidden="true">#</a> Babel</h2>
|
||||
<p>JavaScript 编译器。</p>
|
||||
<p>主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中</p>
|
||||
<h3 id="_1-配置文件-1" tabindex="-1"><a class="header-anchor" href="#_1-配置文件-1" aria-hidden="true">#</a> 1. 配置文件</h3>
|
||||
<p>配置文件由很多种写法：</p>
|
||||
<ul>
|
||||
<li><code>babel.config.*</code>：新建文件，位于项目根目录
|
||||
<ul>
|
||||
<li><code>babel.config.js</code></li>
|
||||
<li><code>babel.config.json</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>.babelrc.*</code>：新建文件，位于项目根目录
|
||||
<ul>
|
||||
<li><code>.babelrc</code></li>
|
||||
<li><code>.babelrc.js</code></li>
|
||||
<li><code>.babelrc.json</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>package.json</code> 中 <code>babel</code>：不需要创建文件，在原有文件基础上写</li>
|
||||
</ul>
|
||||
<p>Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可</p>
|
||||
<h3 id="_2-具体配置-1" tabindex="-1"><a class="header-anchor" href="#_2-具体配置-1" aria-hidden="true">#</a> 2. 具体配置</h3>
|
||||
<p>我们以 <code>babel.config.js</code> 配置文件为例：</p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 预设</span>
|
||||
<span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol>
|
||||
<li>presets 预设</li>
|
||||
</ol>
|
||||
<p>简单理解：就是一组 Babel 插件, 扩展 Babel 功能</p>
|
||||
<ul>
|
||||
<li><code>@babel/preset-env</code>: 一个智能预设，允许您使用最新的 JavaScript。</li>
|
||||
<li><code>@babel/preset-react</code>：一个用来编译 React jsx 语法的预设</li>
|
||||
<li><code>@babel/preset-typescript</code>：一个用来编译 TypeScript 语法的预设</li>
|
||||
</ul>
|
||||
<h3 id="_3-在-webpack-中使用-1" tabindex="-1"><a class="header-anchor" href="#_3-在-webpack-中使用-1" aria-hidden="true">#</a> 3. 在 Webpack 中使用</h3>
|
||||
<ol>
|
||||
<li>下载包</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i babel-loader @babel/core @babel/preset-env -D
|
||||
</code></pre></div><ol start="2">
|
||||
<li>定义 Babel 配置文件</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>babel.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/preset-env"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3">
|
||||
<li>修改 js 文件代码</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>main.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 引入资源，Webpack才会对其打包</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> result1 <span class="token operator">=</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result1<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> result2 <span class="token operator">=</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result2<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ol start="4">
|
||||
<li>配置</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>webpack.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
|
||||
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br></div></div><ol start="5">
|
||||
<li>运行指令</li>
|
||||
</ol>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开打包后的 <code>dist/static/js/main.js</code> 文件查看，会发现箭头函数等 ES6 语法已经转换了</p>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/base/minifyHtml.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/minifyHtml.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-50d92e02",
|
||||
"path": "/base/minifyHtml.html",
|
||||
"title": "html 压缩",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/minifyHtml.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
4
docs/.vuepress/.temp/pages/base/minifyHtml.html.vue
Normal file
4
docs/.vuepress/.temp/pages/base/minifyHtml.html.vue
Normal file
@@ -0,0 +1,4 @@
|
||||
<template><h1 id="html-压缩" tabindex="-1"><a class="header-anchor" href="#html-压缩" aria-hidden="true">#</a> html 压缩</h1>
|
||||
<p>默认生产模式已经开启了：html 压缩和 js 压缩</p>
|
||||
<p>不需要额外进行配置</p>
|
||||
</template>
|
||||
112
docs/.vuepress/.temp/pages/base/optimizeCss.html.js
Normal file
112
docs/.vuepress/.temp/pages/base/optimizeCss.html.js
Normal file
@@ -0,0 +1,112 @@
|
||||
export const data = {
|
||||
"key": "v-65f7fcd8",
|
||||
"path": "/base/optimizeCss.html",
|
||||
"title": "Css 处理",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "提取 Css 成单独文件",
|
||||
"slug": "提取-css-成单独文件",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 运行指令",
|
||||
"slug": "_3-运行指令",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "Css 兼容性处理",
|
||||
"slug": "css-兼容性处理",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置-1",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 控制兼容性",
|
||||
"slug": "_3-控制兼容性",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 合并配置",
|
||||
"slug": "_4-合并配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "5. 运行指令",
|
||||
"slug": "_5-运行指令",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "Css 压缩",
|
||||
"slug": "css-压缩",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包-2",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置-2",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 运行指令",
|
||||
"slug": "_3-运行指令-1",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/optimizeCss.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
489
docs/.vuepress/.temp/pages/base/optimizeCss.html.vue
Normal file
489
docs/.vuepress/.temp/pages/base/optimizeCss.html.vue
Normal file
File diff suppressed because one or more lines are too long
37
docs/.vuepress/.temp/pages/base/other.html.js
Normal file
37
docs/.vuepress/.temp/pages/base/other.html.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export const data = {
|
||||
"key": "v-499655ae",
|
||||
"path": "/base/other.html",
|
||||
"title": "处理其他资源",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 配置",
|
||||
"slug": "_1-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 运行指令",
|
||||
"slug": "_2-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/other.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
66
docs/.vuepress/.temp/pages/base/other.html.vue
Normal file
66
docs/.vuepress/.temp/pages/base/other.html.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template><h1 id="处理其他资源" tabindex="-1"><a class="header-anchor" href="#处理其他资源" aria-hidden="true">#</a> 处理其他资源</h1>
|
||||
<p>开发中可能还存在一些其他资源，如音视频等，我们也一起处理了</p>
|
||||
<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?|map4|map3|avi)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br></div></div><p>就是在处理字体图标资源基础上增加其他文件类型，统一处理即可</p>
|
||||
<h2 id="_2-运行指令" tabindex="-1"><a class="header-anchor" href="#_2-运行指令" aria-hidden="true">#</a> 2. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><p>打开 index.html 页面查看效果</p>
|
||||
</template>
|
||||
43
docs/.vuepress/.temp/pages/base/output.html.js
Normal file
43
docs/.vuepress/.temp/pages/base/output.html.js
Normal file
@@ -0,0 +1,43 @@
|
||||
export const data = {
|
||||
"key": "v-5a4f3333",
|
||||
"path": "/base/output.html",
|
||||
"title": "修改输出资源的名称和路径",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 配置",
|
||||
"slug": "_1-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 修改 index.html",
|
||||
"slug": "_2-修改-index-html",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 运行指令",
|
||||
"slug": "_3-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/output.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
85
docs/.vuepress/.temp/pages/base/output.html.vue
Normal file
85
docs/.vuepress/.temp/pages/base/output.html.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template><h1 id="修改输出资源的名称和路径" tabindex="-1"><a class="header-anchor" href="#修改输出资源的名称和路径" aria-hidden="true">#</a> 修改输出资源的名称和路径</h1>
|
||||
<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br></div></div><h2 id="_2-修改-index-html" tabindex="-1"><a class="header-anchor" href="#_2-修改-index-html" aria-hidden="true">#</a> 2. 修改 index.html</h2>
|
||||
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 修改 js 资源路径 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/static/js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="_3-运行指令" tabindex="-1"><a class="header-anchor" href="#_3-运行指令" aria-hidden="true">#</a> 3. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
|
||||
</code></pre></div><ul>
|
||||
<li>此时输出文件目录：</li>
|
||||
</ul>
|
||||
<p>（注意：需要将上次打包生成的文件清空，再重新打包才有效果）</p>
|
||||
<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>├── dist
|
||||
└── static
|
||||
├── imgs
|
||||
│ └── 7003350e.png
|
||||
└── js
|
||||
└── main.js
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></template>
|
||||
24
docs/.vuepress/.temp/pages/base/postcss.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/postcss.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-72fd740a",
|
||||
"path": "/base/postcss.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/postcss.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/base/postcss.html.vue
Normal file
1
docs/.vuepress/.temp/pages/base/postcss.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
56
docs/.vuepress/.temp/pages/base/production.html.js
Normal file
56
docs/.vuepress/.temp/pages/base/production.html.js
Normal file
@@ -0,0 +1,56 @@
|
||||
export const data = {
|
||||
"key": "v-6940ce0a",
|
||||
"path": "/base/production.html",
|
||||
"title": "生产模式介绍",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "生产模式准备",
|
||||
"slug": "生产模式准备",
|
||||
"children": [
|
||||
{
|
||||
"level": 3,
|
||||
"title": "1. 文件目录",
|
||||
"slug": "_1-文件目录",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "2. 修改 webpack.dev.js",
|
||||
"slug": "_2-修改-webpack-dev-js",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "3. 修改 webpack.prod.js",
|
||||
"slug": "_3-修改-webpack-prod-js",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 3,
|
||||
"title": "4. 配置运行指令",
|
||||
"slug": "_4-配置运行指令",
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/production.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
208
docs/.vuepress/.temp/pages/base/production.html.vue
Normal file
208
docs/.vuepress/.temp/pages/base/production.html.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template><h1 id="生产模式介绍" tabindex="-1"><a class="header-anchor" href="#生产模式介绍" aria-hidden="true">#</a> 生产模式介绍</h1>
|
||||
<p>生产模式是开发完成代码后，我们需要得到代码将来部署上线。</p>
|
||||
<p>这个模式下我们主要对代码进行优化，让其运行性能更好。</p>
|
||||
<p>优化主要从两个角度出发:</p>
|
||||
<ol>
|
||||
<li>优化代码运行性能</li>
|
||||
<li>优化代码打包速度</li>
|
||||
</ol>
|
||||
<h2 id="生产模式准备" tabindex="-1"><a class="header-anchor" href="#生产模式准备" aria-hidden="true">#</a> 生产模式准备</h2>
|
||||
<p>我们分别准备两个配置文件来放不同的配置</p>
|
||||
<h3 id="_1-文件目录" tabindex="-1"><a class="header-anchor" href="#_1-文件目录" aria-hidden="true">#</a> 1. 文件目录</h3>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>├── webpack-test (项目根目录)
|
||||
├── config (Webpack配置文件目录)
|
||||
│ ├── webpack.dev.js(开发模式配置文件)
|
||||
│ └── webpack.prod.js(生产模式配置文件)
|
||||
├── node_modules (下载包存放目录)
|
||||
├── src (项目源码目录，除了html其他都在src里面)
|
||||
│ └── 略
|
||||
├── public (项目html文件)
|
||||
│ └── index.html
|
||||
├── .eslintrc.js(Eslint配置文件)
|
||||
├── babel.config.js(Babel配置文件)
|
||||
└── package.json (包的依赖管理配置文件)
|
||||
</code></pre></div><h3 id="_2-修改-webpack-dev-js" tabindex="-1"><a class="header-anchor" href="#_2-修改-webpack-dev-js" aria-hidden="true">#</a> 2. 修改 webpack.dev.js</h3>
|
||||
<p>因为文件目录变了，所以所有绝对路径需要回退一层目录才能找到对应的文件</p>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token comment">// 开发模式没有输出，不需要指定输出目录</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token comment">// clean: true, // 开发模式没有输出，不需要清空输出结果</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
|
||||
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 以 public/index.html 为模板创建文件</span>
|
||||
<span class="token comment">// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源</span>
|
||||
<span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 其他省略</span>
|
||||
<span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">"localhost"</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器域名</span>
|
||||
<span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">"3000"</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器端口号</span>
|
||||
<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动打开浏览器</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br></div></div><p>运行开发模式的指令：</p>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack serve --config ./config/webpack.dev.js
|
||||
</code></pre></div><h3 id="_3-修改-webpack-prod-js" tabindex="-1"><a class="header-anchor" href="#_3-修改-webpack-prod-js" aria-hidden="true">#</a> 3. 修改 webpack.prod.js</h3>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 生产模式需要输出</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
|
||||
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 以 public/index.html 为模板创建文件</span>
|
||||
<span class="token comment">// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源</span>
|
||||
<span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// devServer: {</span>
|
||||
<span class="token comment">// host: "localhost", // 启动服务器域名</span>
|
||||
<span class="token comment">// port: "3000", // 启动服务器端口号</span>
|
||||
<span class="token comment">// open: true, // 是否自动打开浏览器</span>
|
||||
<span class="token comment">// },</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br></div></div><p>运行生产模式的指令：</p>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack --config ./config/webpack.prod.js
|
||||
</code></pre></div><h3 id="_4-配置运行指令" tabindex="-1"><a class="header-anchor" href="#_4-配置运行指令" aria-hidden="true">#</a> 4. 配置运行指令</h3>
|
||||
<p>为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面</p>
|
||||
<div class="language-json ext-json line-numbers-mode"><pre v-pre class="language-json"><code><span class="token comment">// package.json</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 其他省略</span>
|
||||
<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"npm run dev"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"npx webpack serve --config ./config/webpack.dev.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"npx webpack --config ./config/webpack.prod.js"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>以后启动指令：</p>
|
||||
<ul>
|
||||
<li>开发模式：<code>npm start</code> 或 <code>npm run dev</code></li>
|
||||
<li>生产模式：<code>npm run build</code></li>
|
||||
</ul>
|
||||
</template>
|
||||
43
docs/.vuepress/.temp/pages/base/server.html.js
Normal file
43
docs/.vuepress/.temp/pages/base/server.html.js
Normal file
@@ -0,0 +1,43 @@
|
||||
export const data = {
|
||||
"key": "v-5e3bb631",
|
||||
"path": "/base/server.html",
|
||||
"title": "开发服务器&自动化",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [
|
||||
{
|
||||
"level": 2,
|
||||
"title": "1. 下载包",
|
||||
"slug": "_1-下载包",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "2. 配置",
|
||||
"slug": "_2-配置",
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"level": 2,
|
||||
"title": "3. 运行指令",
|
||||
"slug": "_3-运行指令",
|
||||
"children": []
|
||||
}
|
||||
],
|
||||
"git": {},
|
||||
"filePathRelative": "base/server.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
95
docs/.vuepress/.temp/pages/base/server.html.vue
Normal file
95
docs/.vuepress/.temp/pages/base/server.html.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template><h1 id="开发服务器-自动化" tabindex="-1"><a class="header-anchor" href="#开发服务器-自动化" aria-hidden="true">#</a> 开发服务器&自动化</h1>
|
||||
<p>每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化</p>
|
||||
<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i webpack-dev-server -D
|
||||
</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
|
||||
<ul>
|
||||
<li>webpack.config.js</li>
|
||||
</ul>
|
||||
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
|
||||
<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token comment">// 用来匹配 .css 结尾的文件</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
|
||||
<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
|
||||
<span class="token comment">// [hash:8]: hash值取8位</span>
|
||||
<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
|
||||
<span class="token comment">// [query]: 添加之前的query参数</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
|
||||
<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 指定检查文件的根目录</span>
|
||||
<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// 以 public/index.html 为模板创建文件</span>
|
||||
<span class="token comment">// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源</span>
|
||||
<span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 开发服务器</span>
|
||||
<span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">"localhost"</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器域名</span>
|
||||
<span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">"3000"</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器端口号</span>
|
||||
<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动打开浏览器</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br></div></div><h2 id="_3-运行指令" tabindex="-1"><a class="header-anchor" href="#_3-运行指令" aria-hidden="true">#</a> 3. 运行指令</h2>
|
||||
<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack serve
|
||||
</code></pre></div><p><strong>注意运行指令发生了变化</strong></p>
|
||||
<p>并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。</p>
|
||||
<p>开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。</p>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/base/summary.html.js
Normal file
24
docs/.vuepress/.temp/pages/base/summary.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-ce2194d0",
|
||||
"path": "/base/summary.html",
|
||||
"title": "总结",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "base/summary.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
39
docs/.vuepress/.temp/pages/base/summary.html.vue
Normal file
39
docs/.vuepress/.temp/pages/base/summary.html.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template><h1 id="总结" tabindex="-1"><a class="header-anchor" href="#总结" aria-hidden="true">#</a> 总结</h1>
|
||||
<p>本章节我们学会了 Webpack 基本使用，掌握了以下功能：</p>
|
||||
<ol>
|
||||
<li>两种开发模式</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>开发模式：代码能编译自动化运行</li>
|
||||
<li>生产模式：代码编译优化输出</li>
|
||||
</ul>
|
||||
<ol start="2">
|
||||
<li>Webpack 基本功能</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>开发模式：可以编译 ES Module 语法</li>
|
||||
<li>生产模式：可以编译 ES Module 语法，压缩 js 代码</li>
|
||||
</ul>
|
||||
<ol start="3">
|
||||
<li>Webpack 配置文件</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li>5 个核心概念
|
||||
<ul>
|
||||
<li>entry</li>
|
||||
<li>output</li>
|
||||
<li>loader</li>
|
||||
<li>plugins</li>
|
||||
<li>mode</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>devServer 配置</li>
|
||||
</ul>
|
||||
<ol start="4">
|
||||
<li>Webpack 脚本指令用法</li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li><code>webpack</code> 直接打包输出</li>
|
||||
<li><code>webpack serve</code> 启动开发服务器，内存编译打包没有输出</li>
|
||||
</ul>
|
||||
</template>
|
||||
24
docs/.vuepress/.temp/pages/hospital/hospitalSet.html.js
Normal file
24
docs/.vuepress/.temp/pages/hospital/hospitalSet.html.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export const data = {
|
||||
"key": "v-98ed3f26",
|
||||
"path": "/hospital/hospitalSet.html",
|
||||
"title": "",
|
||||
"lang": "zh-CN",
|
||||
"frontmatter": {},
|
||||
"excerpt": "",
|
||||
"headers": [],
|
||||
"git": {},
|
||||
"filePathRelative": "hospital/hospitalSet.md"
|
||||
}
|
||||
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept()
|
||||
if (__VUE_HMR_RUNTIME__.updatePageData) {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
}
|
||||
}
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept(({ data }) => {
|
||||
__VUE_HMR_RUNTIME__.updatePageData(data)
|
||||
})
|
||||
}
|
||||
1
docs/.vuepress/.temp/pages/hospital/hospitalSet.html.vue
Normal file
1
docs/.vuepress/.temp/pages/hospital/hospitalSet.html.vue
Normal file
@@ -0,0 +1 @@
|
||||
<template></template>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user