Follow @flower Shorts to learn webpack

  • Problem a

Eslint-loader always compiles wrong,vscode eslint is still prettier than prettier. The eslint-loader is then turned off.

  • Question 2

Cannot get process.env.WEBPACK_SERVE, always return undefined

Follow @yellow bug to learn webpack

The first section
  • webpack src/main.jsAn error
Module not found: Error: Can't resolve 'SRC /main.js' in 'E:\Code\Node\webpack-app' resolve: webpack. / SRC /main.jsCopy the code
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Webpack. / SRC /main.js --mode developmentCopy the code
  • filename: '[name].[hash:8].js'prompt
DeprecationWarning: [hash] is now [fullhash] 解决 filename: '[name].[fullhash:8].js'Copy the code
  • The result is always main.[fullhash:8].js, but no header.[fullhash].js
"Build ":" webpack. / SRC /main.js --config build/webpack.configCopy the code

  • If the contents of the file are not changed, the value returned by [fullHash :8] will not change and will be fixed by value.

  • Plugins (webpack.config.js module. Exports) does not return the same name as plugins, but builds do

  • The HtmlWebpackPlugin plugin injected JS into by default, not the bottom of , but with the asynchronous tag defer added

<head><script defer SRC ="main.172bf3f4.js"></script></head> 'body', but <script> still adds the asynchronous tag defer, so you can add scriptLoading: 'blocking' as wellCopy the code
  • { loader:'postcss-loader', options:{ plugins:[require('autoprefixer')] }An error
options has an unknown property 'plugins'PostcssOptions: options:{postcssOptions: {postcssOptions: plugins: [require('autoprefixer')]}Copy the code
  • min-css-extract-pluginAn error
ReferenceError: Document is not defined ReferenceError: Document is not definedCopy the code
  • extra-text-webpack-pluginhole
TypeError: Compiler. plugin is not a function TypeError: Compiler. plugin is not a functionCopy the code
  • webpack-dev-serverAn error
Error: Cannot find module 'webpack-cli/bin/config-yargs' If using webpack-cli 4 or webpack 5, change the command webpack-dev-server to webpack serve example: "dev": "webpack serve --config build/webpack.config.js"Copy the code

Follow the official guide to Webpack

In fact, the official guide is more suitable for learning functions, because the package installed on the way to learn does not care about the version, and the version change makes it always bumpy to follow the footsteps of the big god. Of course, looking at the god of things, can also feel more obvious version of the change.