preface

I have been planning to learn webpack system for a long time, and now I have finally Started. Next, I will share the process of learning from scratch, recording myself and sharing others. This article mainly shares installation and configuration, which is also known as Getting Started learning in the document.



How do I install WebPack

  1. Environment configuration: Before you learn webPack, configure the Node environment, download node, install it foolishly, and choose a stable version of Node rather than the latest version. My version here is V10.15.3
  2. To create a webpack-demo folder on the desktop, run the mkdir webpack-demo command to go to the webpack-demo folder
  3. Initialize the project after entering the folder: NPM init

    After initialization, there are a lot of configuration items, the name, the version, the description, you don’t have to hit the press enter to create the configuration, it’s also mentioned in the documentation, if you don’t want to fill in the configuration, just do NPM init -y

  4. I opened the project in the editor, where I added, deleted and changed the operation, because some things are not needed or needed at present, the original appearance

    After finishing: private configuration means private project, not uploaded to NPM library.



  5. After initialization, start installing WebPack. There are two ways to install WebPack

    The first is global installationNPM install webpack webpack-cli -g install webpack-cli -g install webpack -CLI
  6. Note:Do not install webpack globally, because you may not have the same version of webpack for all projects in your company, but if you start more than two projects, the project will not start because of different versions, so it is better to install it in this project

    Delete the global webpack command: NPM uninstall webpack webpack-cli -g: NPM uninstall webpack webpack-cli -g

    NPM install webpack webpack-cli –save-dev or -d

    NPM install webpack@ webpack-cli -d

    View the project





Manual configuration file

  1. Create the webpack.config.js file in the root directory (wenbpack will look for this file by default when packing, if it is not the file name, then the packing process will report an error, of course you can change the default file, You can run NPX webpack –config for the name you remembered.js, and when you pack it webpack will find the configuration file you want to set.)



    Note: __dirname is two underscores

  2. Execute the NPX webpack command to pack



  3. In fact, you can also set up a package like vue to execute NPM run build, but need to configure it



  4. After packing the file, no error



conclusion

If you also want to learn Webpack4, you can follow me. We can learn together. This is just the beginning, and at least one article will be updated every week in the later period (due to the recent work stress, I can only spare time to learn and write articles). Continue to update ~~~~~~~~~ to a small praise let us continue to move forward!!