github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

更新css-loader

pull/389/head
lyswhut 2020-09-02 14:00:01 +08:00
parent 868da542ab
commit 9fa0700f72
10 changed files with 127 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build-config/css-loader.config.js
View File

@ -3,6 +3,6 @@ const isDev = process.env.NODE_ENV === 'development'
module.exports = {
modules: {
localIdentName: isDev ? '[folder]-[name]--[local]--[hash:base64:5]' : '[hash:base64:5]',
exportLocalsConvention: 'camelCase',
},
localsConvention: 'camelCase',
}

31
build-config/renderer-lyric/webpack.config.base.js
View File

@ -1,9 +1,12 @@
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const vueLoaderConfig = require('../vue-loader.config')
const { mergeCSSLoader } = require('../utils')
const isDev = process.env.NODE_ENV === 'development'
module.exports = {
target: 'electron-renderer',
@ -46,6 +49,28 @@ module.exports = {
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
oneOf: mergeCSSLoader(),
},
{
test: /\.less$/,
oneOf: mergeCSSLoader({
loader: 'less-loader',
options: {
sourceMap: true,
},
}),
},
{
test: /\.styl(:?us)?$/,
oneOf: mergeCSSLoader({
loader: 'stylus-loader',
options: {
sourceMap: true,
},
}),
},
{
test: /\.pug$/,
oneOf: [
@ -98,5 +123,11 @@ module.exports = {
__dirname,
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css',
}),
],
}

28
build-config/renderer-lyric/webpack.config.dev.js
View File

@ -6,37 +6,9 @@ const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const { mergeCSSLoaderDev } = require('../utils')
module.exports = merge(baseConfig, {
mode: 'development',
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.css$/,
oneOf: mergeCSSLoaderDev(),
},
{
test: /\.less$/,
oneOf: mergeCSSLoaderDev({
loader: 'less-loader',
options: {
sourceMap: true,
},
}),
},
{
test: /\.styl(:?us)?$/,
oneOf: mergeCSSLoaderDev({
loader: 'stylus-loader',
options: {
sourceMap: true,
},
}),
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),

31
build-config/renderer-lyric/webpack.config.prod.js
View File

@ -1,6 +1,5 @@
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
@ -8,7 +7,6 @@ const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const { mergeCSSLoaderProd } = require('../utils')
const { dependencies } = require('../../package.json')
let whiteListedModules = ['vue']
@ -20,32 +18,6 @@ module.exports = merge(baseConfig, {
externals: [
...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
],
module: {
rules: [
{
test: /\.css$/,
oneOf: mergeCSSLoaderProd(),
},
{
test: /\.less$/,
oneOf: mergeCSSLoaderProd({
loader: 'less-loader',
options: {
sourceMap: true,
},
}),
},
{
test: /\.styl(:?us)?$/,
oneOf: mergeCSSLoaderProd({
loader: 'stylus-loader',
options: {
sourceMap: true,
},
}),
},
],
},
plugins: [
new CopyWebpackPlugin({
patterns: [
@ -60,9 +32,6 @@ module.exports = merge(baseConfig, {
NODE_ENV: '"production"',
},
}),
new MiniCssExtractPlugin({
filename: '[name].css',
}),
new webpack.NamedChunksPlugin(),
],
optimization: {

31
build-config/renderer/webpack.config.base.js
View File

@ -1,9 +1,12 @@
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const vueLoaderConfig = require('../vue-loader.config')
const { mergeCSSLoader } = require('../utils')
const isDev = process.env.NODE_ENV === 'development'
module.exports = {
target: 'electron-renderer',
@ -46,6 +49,28 @@ module.exports = {
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
oneOf: mergeCSSLoader(),
},
{
test: /\.less$/,
oneOf: mergeCSSLoader({
loader: 'less-loader',
options: {
sourceMap: true,
},
}),
},
{
test: /\.styl(:?us)?$/,
oneOf: mergeCSSLoader({
loader: 'stylus-loader',
options: {
sourceMap: true,
},
}),
},
{
test: /\.pug$/,
oneOf: [
@ -98,5 +123,11 @@ module.exports = {
__dirname,
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: isDev ? '[name].css' : '[name].[contenthash:8].css',
chunkFilename: isDev ? '[id].css' : '[id].[contenthash:8].css',
}),
],
}

28
build-config/renderer/webpack.config.dev.js
View File

@ -6,37 +6,9 @@ const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const { mergeCSSLoaderDev } = require('../utils')
module.exports = merge(baseConfig, {
mode: 'development',
devtool: 'eval-source-map',
module: {
rules: [
{
test: /\.css$/,
oneOf: mergeCSSLoaderDev(),
},
{
test: /\.less$/,
oneOf: mergeCSSLoaderDev({
loader: 'less-loader',
options: {
sourceMap: true,
},
}),
},
{
test: /\.styl(:?us)?$/,
oneOf: mergeCSSLoaderDev({
loader: 'stylus-loader',
options: {
sourceMap: true,
},
}),
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),

31
build-config/renderer/webpack.config.prod.js
View File

@ -1,6 +1,5 @@
const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
@ -8,7 +7,6 @@ const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const { mergeCSSLoaderProd } = require('../utils')
const { dependencies } = require('../../package.json')
let whiteListedModules = ['vue']
@ -20,32 +18,6 @@ module.exports = merge(baseConfig, {
externals: [
...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
],
module: {
rules: [
{
test: /\.css$/,
oneOf: mergeCSSLoaderProd(),
},
{
test: /\.less$/,
oneOf: mergeCSSLoaderProd({
loader: 'less-loader',
options: {
sourceMap: true,
},
}),
},
{
test: /\.styl(:?us)?$/,
oneOf: mergeCSSLoaderProd({
loader: 'stylus-loader',
options: {
sourceMap: true,
},
}),
},
],
},
plugins: [
new CopyWebpackPlugin({
patterns: [
@ -60,9 +32,6 @@ module.exports = merge(baseConfig, {
NODE_ENV: '"production"',
},
}),
new MiniCssExtractPlugin({
filename: '[name].css',
}),
new webpack.NamedChunksPlugin(),
],
optimization: {

66
build-config/utils.js
View File

@ -2,62 +2,21 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const cssLoaderConfig = require('./css-loader.config')
const chalk = require('chalk')
// merge css-loader in development
exports.mergeCSSLoaderDev = beforeLoader => {
const loader = [
// 这里匹配 `<style module>`
{
resourceQuery: /module/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: Object.assign({
sourceMap: true,
}, cssLoaderConfig),
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
],
},
// 这里匹配普通的 `<style>` 或 `<style scoped>`
{
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
],
},
]
if (beforeLoader) {
loader[0].use.push(beforeLoader)
loader[1].use.push(beforeLoader)
}
return loader
}
const isDev = process.env.NODE_ENV === 'development'
// merge css-loader in production
exports.mergeCSSLoaderProd = beforeLoader => {
// merge css-loader
exports.mergeCSSLoader = beforeLoader => {
const loader = [
// 这里匹配 `<style module>`
{
resourceQuery: /module/,
use: [
MiniCssExtractPlugin.loader,
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
},
},
{
loader: 'css-loader',
options: cssLoaderConfig,
@ -68,7 +27,12 @@ exports.mergeCSSLoaderProd = beforeLoader => {
// 这里匹配普通的 `<style>` 或 `<style scoped>`
{
use: [
MiniCssExtractPlugin.loader,
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: isDev,
},
},
'css-loader',
'postcss-loader',
],

62
package-lock.json generated
View File

@ -6752,26 +6752,31 @@
}
},
"css-loader": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
"integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==",
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.2.2.tgz",
"integrity": "sha512-omVGsTkZPVwVRpckeUnLshPp12KsmMSLqYxs12+RzM9jRR5Y+Idn/tBffjXRvOE+qW7if24cuceFJqYR5FmGBg==",
"dev": true,
"requires": {
"camelcase": "^5.3.1",
"camelcase": "^6.0.0",
"cssesc": "^3.0.0",
"icss-utils": "^4.1.1",
"loader-utils": "^1.2.3",
"normalize-path": "^3.0.0",
"loader-utils": "^2.0.0",
"postcss": "^7.0.32",
"postcss-modules-extract-imports": "^2.0.0",
"postcss-modules-local-by-default": "^3.0.2",
"postcss-modules-local-by-default": "^3.0.3",
"postcss-modules-scope": "^2.2.0",
"postcss-modules-values": "^3.0.0",
"postcss-value-parser": "^4.1.0",
"schema-utils": "^2.7.0",
"semver": "^6.3.0"
"semver": "^7.3.2"
},
"dependencies": {
"@types/json-schema": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
"dev": true
},
"ajv": {
"version": "6.12.4",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
@ -6784,6 +6789,18 @@
"uri-js": "^4.2.2"
}
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true
},
"camelcase": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
"integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
"dev": true
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@ -6806,6 +6823,17 @@
}
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"postcss": {
"version": "7.0.32",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
@ -6824,16 +6852,22 @@
"dev": true
},
"schema-utils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
"integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.4",
"ajv": "^6.12.2",
"ajv-keywords": "^3.4.1"
"@types/json-schema": "^7.0.5",
"ajv": "^6.12.4",
"ajv-keywords": "^3.5.2"
}
},
"semver": {
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
"integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

4
package.json
View File

@ -50,7 +50,6 @@
"pack:dir": "node build-config/pack.js && electron-builder --dir",
"dev": "node build-config/runner-dev.js",
"clean:electron": "rimraf dist/electron",
"clean:web": "rimraf dist/web",
"clean": "rimraf dist && rimraf build",
"build:main": "cross-env NODE_ENV=production webpack --config build-config/main/webpack.config.prod.js --progress --hide-modules",
"build:renderer": "cross-env NODE_ENV=production webpack --config build-config/renderer/webpack.config.prod.js --progress --hide-modules",
@ -175,7 +174,7 @@
"copy-webpack-plugin": "^6.0.3",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"css-loader": "^3.6.0",
"css-loader": "^4.2.2",
"del": "^5.1.0",
"electron": "^10.1.0",
"electron-builder": "^22.8.0",
@ -211,7 +210,6 @@
"terser-webpack-plugin": "^4.1.0",
"url-loader": "^4.1.0",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",