1. Npm-init initializes an environment

  2. Packaging orders webpack [entry path] – o [the output path] – mode = [development | prodution]

Webpack can only handle JS JSON resources to compile ES6 modularized code into ES5(browser recognized)

  1. Process other resource loaders

  2. Webpack.config. js load the configuration when running the webpack command, package it according to the configuration items inside, run it based on node platform, and adopt CommonJS modularization

  3. Webpack has five core concepts

    • entry
    • output
    • loader
    • plugin
    • babel

  4. css-loader

    • css-loader 将cssCode intocommonjsModule is loadedjsThe parsed intocssstring
    • style-loader 将jsthecssStyle resource concatenation<style></style>Tags are inserted into the page<header></header>To take effect
    • testRegular de-matchingcssFile,useExecute the correspondingloader(From right to left)

  5. Webpack packages HTML resources

    • pluginYou need to download, reference, and use it, unlike loader
    • html-webpack-pluginBy default, an empty HTML file is created, importing all the resources that are packaged into the output. In order for the HTML to be structured and not empty, an HTML template is set up 
         / / the plugin
  plugins: [
    new HtmlWwebpackPlugin({
      template: './src/index.html'})]Copy the code

  6. Package image resources

    • url-loader file-loader
    • Images in HTML cannot be processed by default
    • Solution: Add onehtml-loaderAnd configure 
      {
    test: /\.html$/,
    loader: 'html-loader'.// img is responsible for importing img
    options: {
      esModule: false // Change to commonJS import mode to prevent image generation but page cannot find image}}Copy the code

  7. Package other resources

    • Resources that do not need to do any processing
    • Loader rules exclude resources that require a Loaderfile-loaderTo deal with

  8. DevServer hot deployment

    • Not part of the core concept
    • configuration 
      devServer: {
 contentBase: path.resolve(__dirname, 'build'),
 // Enable gzip compression
 compress: true.port: 1080
}
Copy the code
    • webpack 5.xStart thenpx webpack server