userscripts/webpack.common.rules.js at master · frontendniubility/userscripts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
var path = require("path")
const Config = require("webpack-chain")
const config = new Config()

config.module
	.rule("babel-loader")
	.test(/\.m?js$|\.es6$|\.js$/i)
	.use("babel-loader")
	.loader("babel-loader")
	.end()
	.exclude.add(/node_modules/)
	.end()
	.include.add(path.resolve("./src"))
	.end()

config.module
	.rule("css")
	.test(/\.(c)ss$/i)
	.use("vue-style-loader")
	.loader("vue-style-loader")
	.end()
	.use("css-loader")
	.loader("css-loader")
	.options({
		importLoaders: 1, // 一个css中引入了另一个css，也会执行之前两个loader，即postcss-loader和sass-loader
		sourceMap: false, //如果改为true，会导致不通机器上chunkhash不同
	})
	.end()
// .use("postcss-loader")
// .loader("postcss-loader")

config.module
	.rule("sass") // vue-style-loader相关配置
	.test(/\.s[ac]ss$/i)
	.use("vue-style-loader")
	.loader("vue-style-loader")
	.end()
	.use("css-loader")
	.loader("css-loader")
	.options({
		importLoaders: 1, // 一个css中引入了另一个css，也会执行之前两个loader，即postcss-loader和sass-loader

		sourceMap: false, //如果改为true，会导致不通机器上chunkhash不同
	})
	.end()
	.use("sass-loader")
	.loader("sass-loader")
	.options({
		implementation: require("sass"),
		sassOptions: {
			indentedSyntax: true, // optional
		},
	})
	.end()

// .use("postcss-loader")
// .loader("postcss-loader")

config.module
	.rule("html")
	.test(/\.html$/i)

	.use("html-loader")
	.loader("html-loader")

config.module
	.rule("asset")
	.test(/\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i)
	.type("asset")

config.module
	.rule("vue") // vue-loader 相关配置
	.test(/\.vue$/) // 匹配 .vue 文件
	.use("vue-loader")
	.loader("vue-loader")
	.end()
	.end()

// const { VuetifyLoaderPlugin } = require("vuetify-loader")
// config.plugin("VuetifyLoaderPlugin").use(VuetifyLoaderPlugin, [
// 	{
// 		/**
// 		 * This function will be called for every tag used in each vue component
// 		 * It should return an array, the first element will be inserted into the
// 		 * components array, the second should be a corresponding import
// 		 *
// 		 * originalTag - the tag as it was originally used in the template
// 		 * kebabTag    - the tag normalised to kebab-case
// 		 * camelTag    - the tag normalised to PascalCase
// 		 * path        - a relative path to the current .vue file
// 		 * component   - a parsed representation of the current component
// 		 */
// 		match(originalTag, { kebabTag, camelTag, path, component }) {
// 			if (kebabTag.startsWith("core-")) {
// 				return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
// 			}
// 		},
// 	},
// ])
module.exports = config.toConfig()