Start to learn about Webpack

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.

Starting with WebPack V4.0.0, you don’t have to import a configuration file. However, WebPack is still highly configurable. There are four core concepts you need to understand before you start :(this document is intended to give you an introduction to webpack)

  • —— (Entry) Indicates the entry for packaging files (SRC /index.js is the default entry). Multiple entries are supported
  • Output —— (output) Output position of the compressed file
  • The loader —- (loader) escapes corresponding files and parses them into files recognized by the browser
  • —— (plugins) plugins are designed to solve other things that loader cannot implement.
// Install via NPM
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
// Node has the built-in path module, which integrates the file system path operation API
const path = require('path');    
const config = {
    // The webpack mode can also be configured in this configuration
    mode: 'development'.//js entry file, support multi-entry data 1
    entry: {   
        main: path.resolve(__dirname,'.. /src/index.js')},// Exit file after js package compression, the corresponding configuration should be relatively changed when multi-entry data 2
    output: {  
        path: path.resolve(__dirname,'.. /dist'),
        filename:'bundle.js'
    },
    module: {
        // Configure loder rules, scope, control output name, location, etc. The main function is to compile and parse files; Do not use loader temporarily
        rules: []},plugins: [
        // Provide HTML template according to the project, generate a new page, and the corresponding output package compressed output JS, link to the page; For details, see Document 3
        new HtmlWebpackPlugin({template: './src/index.html'}})];module.exports = config;
Copy the code

Data 1 Data 2 Data 3

But that’s where WE’re going to say goodbye