7.2 Build Tools and Asset Management
Modern web development requires build tools to optimize CSS and JavaScript for production. We use tools that can handle both WordPress and Laravel projects while providing features like code minification, autoprefixing, and hot reloading during development.
Webpack serves as our primary build tool, configured to handle various asset types and optimization requirements.
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
// webpack.config.js example
const path = require('path');
module.exports = {
entry: {
main: './assets/js/main.js',
admin: './assets/js/admin.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};