CodeCoupler Webpack First Steps
Commands
Generally, CodeCoupler Webpack works in such a way that you continue to use the Webpack CLI as usual. The generated webpack configuration is then automatically used.
If you use the boilerplate the package.json
includes some usefull scripts that will be used in the
following chapters. If you do not use the boilerplate all the following npm commands can be replaced
with regular Webpack CLI commands.
The commands in the "Get Started" chapters can be replaced with:
npm start
:webpack serve --mode development
npm run build
:webpack --mode production
npm run build:dev
:webpack --mode development
npm run analyze
:webpack --analyze --mode development
npm run build:dev:cdn
:webpack --env cdn.enabled --mode development
You can read the complete overview of all scripts in the Command Reference where you will find further commands to handle linting for example.
Configuration
In your webpack.config.js
you will have now two types of configurations:
const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
ccWebpack(
{
// CodeCoupler Webpack Configuration
},
env,
{
// Webpack Configuration
}
);
In this documentation we will only write about the "CodeCoupler Webpack configuration" or the
"Webpack Configuration" and will not mention that this must be done in the webpack.config.js
file.
In the CodeCoupler Webpack configuration you can define some options to adjust the dynamic generation of the Webpack configuration.
In the Webpack configuration you can use the Webpack configuration options as usual.
The dynamic created Webpack configuration and your own Webpack configuration will be smart merged. Your own Webpack configuration take precedence.
Advanced Configuration
The default webpack.config.js
will merge the dynamically created Webpack configuration and the
standard Webpack configuration with webpack-merge
. If you want to have more control of the merging
you can split the commands and merge by yourself:
const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
ccWebpack(
{
// CodeCoupler Webpack Configuration
},
env,
{
// Webpack Configuration
}
);
const { merge } = require("webpack-merge");
const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) => {
let CodeCouplerWebpackConfig = ccWebpack(
{
// CodeCoupler Webpack Configuration
},
env
);
let StandardWebpackConfig = {
// Webpack Configuration
};
// Apply own merge strategy and
// return final Webpack configuration
return merge(CodeCouplerWebpackConfig, StandardWebpackConfig);
};