Introduction to Webpack (1)- Illustrated What is webpack portal

Initialization and installation

  • Create a new folder in the working directory
  • npm initTo initialize a folder, press OK when the dialog box appears.
  • npm install --global webpackThe global installation will generate webpack in the node_modules folder on drive C.Please note that this is not recommended. A global installation locks you into a particular version of WebPack and may fail in projects that use different versions.Global installation is not officially recommended.
  • npm install --save-dev webpackInstalled in the local development environment
  • npm install --save-dev webpack-cliInstall the CLI after WebPackage 4. Install the CLI into the development environment.
  • -Dis--save-devThe abbreviation of

Package a simple file

  • Create a new one under the foldersrcFile, let’s create a new onemain.jsFile.
  • Create a new one in the root directorywebpack.config.jsFile. Why build this file, because use directlywebpackIt looks forwebpack.config.jsRun it as the default configuration. It can read the contents without specifying any parameters.
// webpack.config.js module.exports = {entry: __dirname + '/ SRC /main.js',// I specified the entry file in SRC /main.js output: {path: Dist filename: 'bundle.js'; dist filename: 'bundle.js';Copy the code

__dirname is a global variable in Node.js that points to the directory where the script is currently being executed.

When there are multiple entry files:

  • If you don’t want to run the default in the first placewebpack.config.js, you want to run other configuration files, such asconfig.jsFile. You can runwebpack --config config.jsSo that it will look forconfig.jsAnd run it.
  • runwebpackIt will automatically look for itwebpack.config.jsFind entry files like the one abovemain.js.
  • If you want to have some personalized requirements, you want to see the progress of the packaging, which modules are packed, information about the modules, and why they are packed. You can enter the following command.
    • webpack --progressYou can see the progress of the packaging.
    • webpack --progress --display-modulesYou can see how many modules are packaged, module information.
    • webpack ---progress --display-modules --display-reasonsThe reason for packing is shown.
  • But this method is too tedious, you have to type so many things at the command line. So is there an easier way?Some!
    • When you initialize it, it generates it automaticallypackage.json. Now find the root directorypackage.jsonFile.

-InsidescriptsNext add define a script, "dev":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons" – Finally run on the command linenpm run dev Because scripts provide “aliases” for commands, like the one above, instead of a series of commands, they are easier to useEven if you don’t enter the above configuration from the command line, you can still see the packaging progress. To see how many modules are packed, module information; Font color; Reasons to pack. Because you defined it in the configuration file, you don’t need it.

Perform packing tasks more quickly

  • The most primitive implementation of the packaging task, you can use the commandwebpack main.js bundle.jsIn this case,main.jsIt’s an entry file,bundle.jsWhen you’re done packing your files.
  • Second, we can do it inwebpack.config.jsWrite configuration in.
Module. exports = {entry: __dirname + "/app/main.js",// only entry: {path: Filename: "bundle.js"// output filename}}Copy the code

We just need to type the webpack command, webpack can find webpack.config.js, find the exit, find the output, perform packaging.

  • Third, inherit the second. Easier and faster to perform packaging. inpackage.jsonFind the “scripts” script and add
"start": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
Copy the code

Then we just need NPM start to pack.

Note that "start" is special in NPM. You only need NPM start to execute the command. If it is not start, add a run in front of it, like NPM run dev or NPM run buildCopy the code

Setting up the development environment

Use Source Maps for debugging

Why use Source Maps?

Because webPack packs the source code to compress, simplify, and even replace variable names, you can’t debug line by line in the browser, so you need to use Source Maps, which allows you to see the source code in the browser and debug line by line.

How to use Source Maps?

Add the devtool attribute to the configuration and assign it to source-map or inline-source-map, which gives a more specific error message indicating a specific error location in the source code, whereas the source-map option does not indicate a specific error location in the source code.

Use development tools

Development tools can simplify the development process. For example, if you save the developer tool after you write the code, it will automatically execute a series of commands for you.

Watch mode

When using webpack-CLI, you can start watch mode by commanding webpack –watch. Once in Watch mode, webpack will be recompiled if a module in the dependency tree changes.

Use the webpack – dev server. –

The browser listens for changes to your code and automatically refreshes to show the results. It is a separate component that needs to be installed separately as a project dependency before being configured in Webpack.

  • The installation.npm install --save-dev webpack-dev-server
  • Modify the configuration file and adddevServerattribute
// webpack.config.js module.exports = {devServer: {contentBase: './dist', True,// no jump to inline: true // refresh in real time}};Copy the code
  • inpackage.jsonAdd a script
 // package.json
  {
      "scripts": {
          "start": "webpack-dev-server --open"
      }
  }
Copy the code
  • Run the command

NPM run start you can view the result on local port 8080.

  • There’s a lot more to building a development environment than that, and I’ve only picked areas that I use frequently in my learning process, or that I think are important.

Write in the last

Webpack is hard to chew, I was looking for materials and watching videos on the Internet, bit by bit to explore. The information on the Internet has a large time dimension, some are still talking about Webpack 1.0, some are talking about the latest version of Webpack, so it is inevitable that there are mistakes in sorting. Feel free to point them out in the comments below!

To be continued…