Common Configurations

  • entry

    • Can accept string, array, object, and other formats
    • The project package entry file can be an absolute path or a relative path
    • The default entry file for webpack is the./ SRC /index.js convention, and the default output is /dist/main.js in the project root directory

  • Output Output configuration after package. Path File path after package. Only absolute path can be used

  • Commonly used Loaders

    • By default, webpack values support.js,.json files. Loader can parse other types of files (.css,.less,.ts,.vue….). Act as a translator. Theoretically any file can be processed as long as there is a responsive loader. A loader only does one thing, the webpack convention
    • If multiple Loaders are used for a file with the same suffix, the loaders are executed in sequence from right to left
    • Css-loader simply packs CSS code into a JS file without doing anything
    • Style-loader extracts the CSS code packaged by THE CSS -loader, automatically generates labels, and inserts them into HTML
    • Less-loader only compiles the less syntax to CSS syntax. Then CSS-loader inserts the compiled CSS content into js files. Finally, style-loader adds CSS to tags and inserts them dynamically into HTML file tags
    • Postcss-loader use order, put in the place can get the CSS content, get the CSS content, through some JS plug-in CSS to enhance the effect of CSS

  • The difference between Loader and Plugin: Loader’s main job is to let WebPack know more about file types, while Plugin’s job is to let webPack control the build process to perform specific tasks. Equivalent to a webpack supplement.

hash,chunkhash,contenthash

If the hash type is not specified, Webpack uses hash by default.

The purpose of using hash names for files is to make use of the browser’s cache. When we do the next iteration of functionality, when only one file is modified, the hash will change, but other files will not change. If the hash does not change, the cache will be removed

  1. Hash changes as the content of the entire project changes
  2. Chunkhash only affects modules under one chunk, and the code blocks that a file depends on are packed into one chunk
  3. The Contenthash changes only according to its content, but if the Contenthash changes, the Chunkhash of the contenthash changes, too

Project directory structure

. | - | SRC project source code -- -- components project common component function module | | - pages project -- index. Js project entry file | - static static resources, pictures, Font file | - webpack webpack packaging related configuration | -- config. Js common configuration variables out | -- webpack.config.com mon. | - js webpack public configuration Webpack. Config. Dev. Js local development environment packaging configuration | -- webpack. Config. Production. The js formal environmental packaging configuration | -- config. Js | -- index. | - HTML packaging template . Babelrc Babel relevant configuration file | -- postcss. Config. Js postcss related configuration file. | - NPMRC NPM install source set | -- package. JsonCopy the code

Complete project packaging scheme

webpack.config.common.js

const path = require('path'); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); Module. exports = {entry: {index: './ SRC /pages/index.js',}, resolve: {// project path alias: {Utils: path.resolve(__dirname, ".. /src/utils"), Components: path.resolve(__dirname, ".. / SRC/components "),}}, performance: {/ / false | | "error" / / "warning" don't show performance tip | in the form of error tip | to warn... // Control when WebPack generates performance hints based on the maximum volume of the entry starting point, integer type, in bytes maxEntrypointSize: 5000000, / / a single resource largest volume, the default maxAssetSize (bytes) : 250000 3000000,}, the module: {rules: [{test: / \. (js | JSX) $/, use: 'babel-loader', include: path.resolve(__dirname, "../src"), exclude: /node_modules/, }, ] }, plugins: [new CleanWebpackPlugin(), // Clean up the package before each time new HtmlWebpackPlugin({template: "./index.html", // Package the HTML template filename: "Index.html ", // generated file name}), new webpack.defineplugin ({// custom project environment variable, here used for secondary directory deployment "process.env": {SECONDARY_PATH: JSON.stringify(process.env.SECONDARY_PATH), }, }), ] }Copy the code

webpack.config.dev.js

const path = require("path"); const config = require("./config"); const webpack = require("webpack"); const { merge } = require("webpack-merge"); const common = require("./webpack.config.common.js"); module.exports = merge(common, { mode: "development", output: { path: path.resolve(__dirname, "dist"), filename: "[name]-[hash:6].js", publicPath: config.publicPath, chunkFilename: "[name].[chunkhash:4].chunk.js", }, devServer: {port: 8089, host: "0.0.0.0", hot: True, / / CSS change hot update, js hot update need cooperate hotOnly and webpack HotModuleReplacementPlugin () compress: True, // When using the HTML5 History API, all 404 requests will respond to the contents of index.html. Will devServer. HistoryApiFallback set to true to open: historyApiFallback: true, hotOnly: HotOnly /* proxy: {// Each key is a prefix that needs to be forwarded "/dataassets/ API ": {target: },}, */ proxy: [// Multiple prefixes to the same backend service writing {context: ["/ dataAssets/API ", "/ SSO "] target: "The backend interface service address,"},]}, devtool: "the inline - source - the map", / / development environment configuration module: {rules: [{test: / \. (less) | CSS $/, use: [ "style-loader", "css-loader", { loader: "less-loader", options: { // less@3 javascriptEnabled: True, // Override antD-style global variable modifyVars: config.modifyVars, globalVars: {imgUri: `~"${config.publicPath}"`, }, }, }, ], }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ "file-loader?hash=sha512&digest=hex&name=[hash].[ext]", ], }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: "url-loader?limit=10000&mimetype=application/font-woff", }, { test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: "file-loader", }, ], }, plugins: [new webpack.HotModuleReplacementPlugin()], });Copy the code

webpack.config.production.js

const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const { merge } = require("webpack-merge"); const config = require("./config"); const common = require("./webpack.config.common.js"); module.exports = merge(common, { mode: "production", output: { path: path.resolve(__dirname, ".. /dist"), publicPath: config.publicPath, // After the project is packed,js will add the uniform access path prefix filename: "js/[name].[hash:6].js", chunkFilename: "js/[name].[hash:6].chunk.js", }, module: { rules: [ { test: /\.(less|css)$/, use: [{// MiniCssExtractPlugin has both plug-in configuration and loader configuration, Specific configuration items making documents loader: / / https://github.com/webpack-contrib/mini-css-extract-plugin MiniCssExtractPlugin.loader, options: { publicPath: Config. publicPath, // Configure the path prefix for accessing CSS files after packaging.},}, "CSS-loader "," postCSs-loader ", {loader: "less-loader", options: {// less@3 javascriptEnabled: true, // Override antD-style global variables modifyVars: config.modifyVars, globalVars: {imgUri: ` ~ "${config. PublicPath}" `, / / is used to set the style file is introduced into image picture address prefix},},},],}, {test: / \ | PNG (jpe? G | | GIF SVG) $/ I use: [ { loader: 'file-loader', options: { name: "[name]-[contenthash:6].[ext]", limit: PublicPath: config.publicPath}}],}, {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: [ { loader: 'url-loader', options: { publicPath: config.publicPath } } ] }, { test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: [ { loader: 'file-loader', options: { publicPath: config.publicPath } } ] }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: "css/[contenthash:6]-[name].css", }), new CopyWebpackPlugin([ { from: path.resolve(__dirname, "../static"), to: path.resolve(__dirname, "../dist/static"), }, ]), ], });Copy the code