Merge configuration and merge

1. Define commands in package.json to perform local build packaging startup or online packaging

    "scripts": {
        "test": "webpack --config build-base-conf/webpack.test.js"
        "build": "webpack --config build-base-conf/webpack.prod.js"
        "dev": "webpack-dev-server --config build-base-conf/webpack.dev.js"
        "devBuild": "webpack --config build-base-conf/webpack.dev.js"
     }
Copy the code

We will have common configuration for online packaging and local packaging and different configuration for packaging in different environments, so we will create a common webpack configuration file webpack.common.js and put the same configuration in webpack.common.js. Introduce common configuration in configuration files for different environments. How do I import webpack.common.js in different configuration files?

1.1 Merge common configuration using Webpack-Merge

Let’s start by introducing common configuration. For example, to build a configuration file locally:

const webpackCommonConf = require('./webpack.common.js') const { smart } = require('webpack-merge') module.exports = Smart (webpackCommonConf,{mode: 'development',// Mode module: {rules: [XXX]}})Copy the code

Specify the package entry point and the directory where the package is generated. Constant and address concatenation operations are required because paths are involved

Path. The js file

Const path = require('path') const srcPath = path.join(_dirname(absolute path of current path),'.. ','src') const distPath = path.join(_dirname,'.. ','dist')Copy the code

When a path is needed, it is indicated by the path constant plus the connection operation, such as specifying the entry file, specifying the output path, and setting the loader to find or not to include the scope

entry: path.join(srcPath,'index')
Copy the code

HtmlWebpackPlugin will be written in the subsequent multi-entry configuration

Plugins: [new CleanWebpackPlugin(), // default to empty output.path folder new webpack.defineplugin ({// ENV: Json.stringify ('production')// Define variables})]Copy the code

4. Local service configuration

DevServer: {port: 8080, progress: true,// Display a progress bar contentBase: disPath,// root directory open: true,// automatically open browser compress: Proxy: {// Localhost :3000/ API/XXX '/ API ': 'http://localhost:3000', // proxy local /api2/xx to localhost:3000/xx '/ API2 ': {target: 'http://localhost:3000', pathRewrite: { '/api2': '' } } } }Copy the code

V. Handling ES6

Use babel-loader to process ES6

rules: [
    test: '/\.js$/',
    loader: ['babel-loader'],
    include: srcPath,
    exclude: /node_modules/
]
Copy the code

And configure it on.babelrc

{" presets ": [" @ Babel/preset - env"], "plugins" : [] / / can be extended according to their own requirements to}Copy the code

Six, processing style

Since our CSS files are introduced modularized like JS files, when we identify a. CSS file, we need to use CSS-loader to parse the. CSS file into the style tag and use style-loader to insert the style tag. Before CSS is parsed, because some CSS is to be compatible with different browsers, we will make an upgrade, using postCSS-Loader will need to be compatible with different browsers for CSS code completion. If the less syntax is used, convert less to CSS first

Rules: [{test: /\.css$/, //loader: ['style-loader','css-loader',' postCSs-loader ']}, {test: /\.less$/, loader: ['style-loader','css-loader','less-loader'] } ]Copy the code

If postCSs-loader is used, you need to add the configuration file postcss.config.js

Module. exports = {plugins: [require('autoprefixer')]// used toprefix CSS styles}Copy the code

Seven, processing pictures

In the development environment, file-loader can be directly used. In this way, when the image tag is introduced, the image file is directly introduced in the form of the image address. It is not friendly online, because the image increases the burden of the server through HTTP requests. Therefore, small images are directly converted into Base64 format and introduced into HTML pages, which can reduce the number of requests compared with file-loader

/ / development environment rules: [{test: / \. (PNG | JPG | jpeg | GIF) $/, use: 'file - loader'}] / / production rules: [{test: /\.(png|jpg|jpeg|gif)$/, use: { loader: 'url-loader', options: {// If the size of the image is smaller than 5KB, outputPath will be stored in the img directory. '/img/, } } }, ]Copy the code

Output Specifies the output file name and address

Specify output file name using contentHash, calculate a value for the content, after the content changes, repackage, contentHash will change, otherwise contentHash unchanged; If the contentHash changes and the js file is sent after the update, the cache will be invalidated and will hit the cache anyway, making the page load faster.

output: {
    filename: 'bundle.[contentHash:8].js'
}
Copy the code