Must-see Easter eggs:Click here

preface

Webpack is a front-end resource builder and a static module packer. 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. (Conceptually if you don’t understand, click here.)

Git address: github.com/OnionMister…

Core WebPack concepts

The entry point indicates which module WebPack should use as a starting point for building its internal dependency diagram. Example: webpack. Config. Js

module.exports = {
  entry: './path/to/my/entry/file.js'
};
Copy the code

The Output attribute tells WebPack where to export the bundles it creates and how to name these files. The default value is./dist. Basically, the entire application structure is compiled into a folder in the output path you specify. Example: webpack. Config. Js

const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: Path.resolve (__dirname, 'dist'), // __dirname project root filename: 'my-first-webpack.bundle.js'}};Copy the code

Loader allows Webpack to handle non-javascript files (Webpack itself only understands JavaScript). Such as IMG/CSS /less and so on. The rules attribute is defined for a single Module object, which contains two required attributes: test and use. Test is the re for the file to be matched, use is the package to be used, and the use value can be an array. Example:

webpack.config.js

const path = require('path');
const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
module.exports = config;
Copy the code

Plugins loaders are used to transform certain types of modules. Plugins 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. All you need to do is install the plugin, require(), and use it in plugins.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // install const webpack = require('webpack') via NPM; Const config = {module: {rules: [{test: /\.txt$/, use: 'raw-loader'}]}, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config;Copy the code

The mode parameter includes development and production, representing the development environment and production environment respectively. Example:

webpack.config.js

module.exports = {
  mode: 'production'
};
Copy the code

Related articles:

1. Webpack js, JSON, CSS, LESS, SASS, SCSS

Webpack HTML, htMl-webpack-plugins

3. Webpack image resources

4. Webpack other resources (such as font libraries, etc.)