1 | // node modules |
||
2 | const merge = require('webpack-merge'); |
||
3 | const path = require('path'); |
||
4 | const webpack = require('webpack'); |
||
5 | |||
6 | // webpack plugins |
||
7 | const DashboardPlugin = require('webpack-dashboard/plugin'); |
||
8 | |||
9 | // config files |
||
10 | const common = require('./webpack.common.js'); |
||
11 | const pkg = require('./package.json'); |
||
0 ignored issues
–
show
Unused Code
introduced
by
![]() |
|||
12 | const settings = require('./webpack.settings.js'); |
||
13 | |||
14 | // Configure the webpack-dev-server |
||
15 | const configureDevServer = (buildType) => { |
||
0 ignored issues
–
show
|
|||
16 | return { |
||
17 | public: settings.devServerConfig.public(), |
||
18 | contentBase: path.resolve(__dirname, settings.paths.templates), |
||
19 | host: settings.devServerConfig.host(), |
||
20 | port: settings.devServerConfig.port(), |
||
21 | https: !!parseInt(settings.devServerConfig.https()), |
||
22 | disableHostCheck: true, |
||
23 | hot: true, |
||
24 | overlay: true, |
||
25 | watchContentBase: true, |
||
26 | watchOptions: { |
||
27 | poll: !!parseInt(settings.devServerConfig.poll()), |
||
28 | ignored: /node_modules/, |
||
29 | }, |
||
30 | headers: { |
||
31 | 'Access-Control-Allow-Origin': '*' |
||
32 | }, |
||
33 | }; |
||
34 | }; |
||
35 | |||
36 | // Configure Image loader |
||
37 | const configureImageLoader = () => { |
||
38 | return { |
||
39 | test: /\.(png|jpe?g|gif|svg|webp)$/i, |
||
40 | use: [ |
||
41 | { |
||
42 | loader: 'file-loader', |
||
43 | options: { |
||
44 | name: 'img/[name].[ext]' |
||
45 | } |
||
46 | } |
||
47 | ] |
||
48 | }; |
||
49 | }; |
||
50 | |||
51 | // Configure optimization |
||
52 | const configureOptimization = () => { |
||
53 | return { |
||
54 | splitChunks: { |
||
55 | cacheGroups: { |
||
56 | vendor: { |
||
57 | test: /node_modules/, |
||
58 | chunks: "initial", |
||
59 | name: "vendor", |
||
60 | priority: 10, |
||
61 | enforce: true |
||
62 | } |
||
63 | } |
||
64 | }, |
||
65 | }; |
||
66 | }; |
||
67 | |||
68 | // Configure the Postcss loader |
||
69 | const configurePostcssLoader = () => { |
||
70 | return { |
||
71 | test: /\.(pcss|css)$/, |
||
72 | use: [ |
||
73 | { |
||
74 | loader: 'style-loader', |
||
75 | }, |
||
76 | { |
||
77 | loader: 'vue-style-loader', |
||
78 | }, |
||
79 | { |
||
80 | loader: 'css-loader', |
||
81 | options: { |
||
82 | importLoaders: 2, |
||
83 | sourceMap: true |
||
84 | } |
||
85 | }, |
||
86 | { |
||
87 | loader: 'resolve-url-loader' |
||
88 | }, |
||
89 | { |
||
90 | loader: 'postcss-loader', |
||
91 | options: { |
||
92 | sourceMap: true |
||
93 | } |
||
94 | } |
||
95 | ] |
||
96 | }; |
||
97 | }; |
||
98 | |||
99 | // Development module exports |
||
100 | module.exports = [ |
||
101 | merge( |
||
102 | common.legacyConfig, |
||
103 | { |
||
104 | output: { |
||
105 | filename: path.join('./js', '[name].js'), |
||
106 | publicPath: settings.devServerConfig.public() + '/', |
||
107 | }, |
||
108 | resolve: { |
||
109 | alias: { |
||
110 | 'vue$': 'vue/dist/vue.js' |
||
111 | } |
||
112 | }, |
||
113 | mode: 'development', |
||
114 | devtool: 'inline-source-map', |
||
115 | optimization: configureOptimization(), |
||
116 | devServer: configureDevServer(), |
||
117 | module: { |
||
118 | rules: [ |
||
119 | configurePostcssLoader(), |
||
120 | configureImageLoader(), |
||
121 | ], |
||
122 | }, |
||
123 | plugins: [ |
||
124 | new webpack.HotModuleReplacementPlugin(), |
||
125 | new DashboardPlugin(), |
||
126 | ], |
||
127 | } |
||
128 | ), |
||
129 | ]; |
||
130 |