This is the 21st day of my participation in the August Text Challenge.More challenges in August

I met webpack

  • In essence, Webpack is a static Module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles. This is the explanation on the official website
  • Generally speaking: Webpack is a packaging tool, through webpack can be JS, CSS, SASS, SCSS, JPG, PNG and other files classified to generate a JS/CSS/JPG file

Webpack serves as a front-end build build

  • Code conversion
    • You can convert TS code into JS code
    • Convert less, SCSS and other code to CSS code
  • File optimization: js/ CSS code can be combined and compressed to reduce the number of requests
  • Code split: To separate out some common code on a page
  • Module merge: Combine code from several JS into a single JS
  • Automatic refresh: The browser automatically refreshes the page to load data after code changes
  • Code check
  • Automatic release

Webpack and WebPack-CLI installation

  • Before installing WebPack, make sure you have the Node environment installed.
  • NPM install webpack is also very easy to install. Webpack cli – in the same way.
npm install webpack webpack-cli
Copy the code

Webpack run

  • Webpack can be run by NPM run [dev]
  • Dev after run is self-configured in package.json and can be any value
{
"scripts": {"dev":"webpack"."build": "webpack --mode production"// You can specify the development environment or production environment by using --mode}}Copy the code

The four core concepts of Webpack

  • Entry

– The entry point indicates which module WebPack should use as a starting point for building its internal dependency graph. Once at the entry point, WebPack finds out which modules and libraries are (directly and indirectly) dependent on the entry point.

  • Each dependency is then processed and finally exported to a file called Bundles, which we will discuss in detail in the next section.

You can specify an entry point (or multiple entry points) by configuring the Entry property in the webpack.config.js configuration file. The default value is./ SRC.

// Simple configuration
module.exports = {
  entry: './src/main.js'
};
Copy the code
  • Output
  • The Output attribute tells WebPack where to export the bundles it creates and how to name these files, with the default being./dist. Basically, the entire application structure is compiled into a folder in the output path you specify. You can configure these processes by specifying an output field in the configuration
  • In the following example, we use the output.filename and output.path attributes to tell the name of the Webpack bundle and where we want the bundle to emit.
  • The path module imported in the following code is a Node.js core module that manipulates file paths.
const path = require('path');

module.exports = {
  entry: './src/main.js'.output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'}};Copy the code
  • loader
  • Loader enables Webpack to handle non-javascript files (WebPack itself only understands JavaScript). Loader can convert all types of files (CSS/JPG, etc.) into valid modules that WebPack can handle, and then you can take advantage of WebPack’s packaging capabilities to process them.
  • In essence, WebPack Loader converts all types of files into modules that the application’s dependency diagram (and ultimately its bundle) can reference directly.
  • Loader has two goals in the webpack configuration
    • The test property identifies the files or files that should be converted by the corresponding loader
    • The use attribute indicates which loader should be used during conversion. If there are multiple Loaders in use, the loader is loaded from right to left by default
    • Enforce: Post is loaded last, pre first
  • Loaders in Rules are loaded from the bottom up by default

== Note that loader can import any type of module (such as.css files), which is webPack-specific and may not be supported by other packers or task executors. We think this language extension is necessary because it allows developers to create more accurate dependency diagrams. = =

const path = require('path');

module.exports = {
  entry: './src/main.js'.output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [{test: /\.scss$/, use: 'scss-loader'}}};Copy the code
  • Plugins
  • Loaders are used to transform certain types of modules, while plug-ins can be used to perform a wider range of tasks. Plug-ins range from packaging optimization and compression to redefining variables in the environment. Plug-in interfaces are extremely powerful and can be used to handle a wide variety of tasks.
  • To use a plugin, you simply require() it and add it to the plugins array. Most plug-ins can be customized with options. You can also use the same plug-in multiple times for different purposes in a configuration file by using the new operator to create an instance of it.
module.exports = {
  entry: './src/main.js'.output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  module: {
    rules: [{test: /\.scss$/, use: 'scss-loader'}},plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})// Automatically import compressed js files into index.html]};Copy the code