Skip to content

Commit 30b6a64

Browse files
abyss-softabyss-soft
committed
refactor: webpack config
1 parent 6e236dc commit 30b6a64

File tree

2 files changed

+80
-79
lines changed

2 files changed

+80
-79
lines changed

‎config/webpack.base.conf.js‎

Lines changed: 76 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
33
const CopyWebpackPlugin = require("copy-webpack-plugin");
44
const HtmlWebpackPlugin = require("html-webpack-plugin");
55
const HtmlPluginRemove = require("html-webpack-plugin-remove");
6-
const { VueLoaderPlugin } = require('vue-loader')
6+
const {VueLoaderPlugin} = require("vue-loader");
77
const isProduction = process.env.NODE_ENV !== "production";
88

99
const PATHS = {
10-
src: path.join(__dirname, "../src"),
11-
dist: path.join(__dirname, "../dist"),
10+
src: path.resolve(__dirname, "../src"),
11+
dist: path.resolve(__dirname, "../dist"),
1212
assets: "assets/"
1313
};
1414

@@ -23,7 +23,8 @@ module.exports = {
2323
},
2424
output: {
2525
filename: `${PATHS.assets}js/[name].[hash].js`,
26-
path: PATHS.dist
26+
path: PATHS.dist,
27+
publicPath: "/"
2728
},
2829
optimization: {
2930
splitChunks: {
@@ -43,78 +44,80 @@ module.exports = {
4344
loader: "babel-loader",
4445
exclude: isProduction ? [/node_modules/, /\.smart-gread-layer$/] : /node_modules/,
4546
},
46-
{
47-
test: /\.vue$/,
48-
loader: "vue-loader",
49-
options: {
50-
loader: {
51-
scss: 'vue-style-loader!css-loader!sass-loader'
47+
{
48+
test: /\.vue$/,
49+
loader: "vue-loader",
50+
options: {
51+
loader: {
52+
scss: "vue-style-loader!css-loader!sass-loader"
53+
}
5254
}
53-
}
54-
},
55-
{
56-
// Fonts
57-
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
58-
loader: "file-loader",
59-
options: {
60-
name: "[name].[ext]"
61-
}
62-
},
63-
{
64-
test: /\.(png|jpg|gif|svg)$/,
65-
loader: "file-loader",
66-
options: {
67-
name: "[name].[ext]"
68-
}
69-
}, {
70-
test: /\.scss$/,
71-
use: [
72-
"style-loader",
73-
MiniCssExtractPlugin.loader,
74-
{
75-
loader: "css-loader",
76-
options: { sourceMap: true }
77-
},
78-
{
79-
loader: "postcss-loader",
80-
options: { sourceMap: true, config: { path: "./postcss.config.js"} }
81-
},
82-
{
83-
loader: "sass-loader",
84-
options: { sourceMap: true }
85-
},
86-
{
87-
loader: 'sass-resources-loader',
88-
options: {
89-
resources: [
90-
'./src/assets/scss/utils/vars.scss',
91-
'./src/assets/scss/utils/mixins.scss',
92-
'./src/assets/scss/utils/fonts.scss'
93-
]
94-
},
55+
},
56+
{
57+
// Fonts
58+
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
59+
loader: "file-loader",
60+
options: {
61+
name: "[name].[ext]"
9562
}
96-
]
97-
}, {
98-
test: /\.css$/,
99-
use: [
100-
"style-loader",
101-
MiniCssExtractPlugin.loader,
102-
{
103-
loader: "css-loader",
104-
options: { sourceMap: true }
105-
}, {
106-
loader: "postcss-loader",
107-
options: { sourceMap: true, config: { path: "./postcss.config.js" } }
63+
},
64+
{
65+
test: /\.(png|jpg|gif|svg)$/,
66+
loader: "file-loader",
67+
options: {
68+
name: "[name].[ext]"
10869
}
109-
]
110-
}
111-
]
70+
}, {
71+
test: /\.scss$/,
72+
use: [
73+
"style-loader",
74+
MiniCssExtractPlugin.loader,
75+
{
76+
loader: "css-loader",
77+
options: {sourceMap: true}
78+
},
79+
{
80+
loader: "postcss-loader",
81+
options: {sourceMap: true, config: {path: "./postcss.config.js"}}
82+
},
83+
{
84+
loader: "sass-loader",
85+
options: {sourceMap: true}
86+
},
87+
{
88+
loader: "sass-resources-loader",
89+
options: {
90+
resources: [
91+
"./src/assets/scss/utils/vars.scss",
92+
"./src/assets/scss/utils/mixins.scss",
93+
"./src/assets/scss/utils/fonts.scss"
94+
]
95+
},
96+
}
97+
]
98+
}, {
99+
test: /\.css$/,
100+
use: [
101+
"style-loader",
102+
MiniCssExtractPlugin.loader,
103+
{
104+
loader: "css-loader",
105+
options: {sourceMap: true}
106+
}, {
107+
loader: "postcss-loader",
108+
options: {sourceMap: true, config: {path: "./postcss.config.js"}}
109+
}
110+
]
111+
}
112+
]
112113
},
113114
resolve: {
114115
alias: {
115116
"~": PATHS.src,
116-
vue$: "vue/dist/vue.js"
117-
}
117+
"vue$": "vue/dist/vue.js",
118+
"@": PATHS.src,
119+
},
120+
extensions: ["*", ".js", ".vue", ".json"]
118121
},
119122
plugins: [
120123
new VueLoaderPlugin(),
@@ -127,11 +130,11 @@ module.exports = {
127130
template: `${PATHS.src}/index.html`,
128131
filename: "./index.html"
129132
}),
130-
new HtmlPluginRemove(/<!--deletestart-->[\s\S]*<!--deleteend-->/gi),
133+
new HtmlPluginRemove(/<!--deletestart-->[\s\S]*<!--deleteend-->/gi),
131134
new CopyWebpackPlugin([
132-
{ from: `${PATHS.src}/${PATHS.assets}img`, to: `${PATHS.assets}img` },
133-
{ from: `${PATHS.src}/${PATHS.assets}fonts`, to: `${PATHS.assets}fonts` },
134-
{ from: `${PATHS.src}/static`, to: "" }
135+
{from: `${PATHS.src}/${PATHS.assets}img`, to: `${PATHS.assets}img`},
136+
{from: `${PATHS.src}/${PATHS.assets}fonts`, to: `${PATHS.assets}fonts`},
137+
{from: `${PATHS.src}/static`, to: ""}
135138
])
136139
],
137140
};

‎config/webpack.dev.conf.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const webpack = require("webpack");
1+
const webpack = require("webpack");
22
const merge = require("webpack-merge");
33
const baseWebpackConfig = require("./webpack.base.conf");
44
require("dotenv").config();
@@ -9,12 +9,10 @@ const devWebpackConfig = merge(baseWebpackConfig, {
99
mode: "development",
1010
devtool: "cheap-module-eval-source-map",
1111
devServer: {
12-
contentBase: baseWebpackConfig.externals.paths.dist,
12+
historyApiFallback: true,
1313
port: 8081,
14-
overlay: {
15-
warnings: true,
16-
errors: true
17-
}
14+
noInfo: true,
15+
overlay: true
1816
},
1917
plugins: [
2018
new webpack.DefinePlugin({ // plugin to define global constants

0 commit comments

Comments
 (0)