My wechat public account: Road of Cultivation in front, welcome to follow.

I have used gulp and Grunt before, but never webpack. I just have time to learn webpack these two days. If you want to study webpack in depth, there are many things configured, and there are many resources on the Internet. The main way FOR me to learn here is the official guide given by Webpack, and the translated version of Webpack Chinese. Because I think the first source is more authoritative than the official website.

My learning process is to read Chinese articles first and get a general impression and understanding of each section. Then look again at the official document in English and follow the example configuration file provided by the official document. If there is any problem in understanding English, think about it again according to the Chinese document. So my article, there are similar translation of English official documents. Because I said follow the document, and then reorganize the process as I understand it.

The reason why I do this is that, on the one hand, I need to improve my ability to read and understand English documents. On the other hand, Chinese documents are usually updated relatively late and have many mistakes. I can’t just follow the Chinese manual. Finally is certainly to start their own operation again, understanding is one thing, operation is another thing.

In this process, I mainly have the following experiences:

  • Regret not learning Webpack sooner, it’s too powerful.
  • Webpack has so many features and concepts that I feel like I can’t learn them all at once. First sort out the main content, details a little bit of learning, supplement.
  • After a period of exercise, I have improved my ability to read English documents, so I need to continue my efforts. Try to completely discard Chinese documents as soon as possible, and finally translate English documents and output English documents.

The following is the text

concept

Before you begin, you must know the concepts involved in WebPack. At present, the latest version of Webpack I study is V4.27.1. In addition, the official website clearly points out that from webPack 4 onwards, there is no need to make configuration files, but it is still extensible.

The core concepts you need to understand in order to learn Webpack:

  • Entry: the entrance
  • Output: the Output
  • Loaders, loader
  • Plugins: Plugins
  • Mode: the Mode
  • Browser Compatibility: Browser Compatibility

Entry

Entry says simple, is not packaged before the original file. You can specify one file, multiple files, or files in different directories. If this parameter is not specified, the default value is./ SRC /index.js. When specifying other files in the configuration file, for example:

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

Output

The Output attribute tells WebPack where to output the packaged file and how to name it. The default is./dist/main.js. As the main output file, the./dist directory is the output directory.

You can modify the output file and directory by modifying the output property in the configuration file, for example:

webpack.config.js

const path = require('path');

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

In the example above, we use the output.filename and output.path attributes to tell WebPack the name of the package file and the directory to package the file. The path module is the Node.js module.

Loaders

Webpack can only recognize JavaScript and JSON files, Loaders allows WebPack to handle other types of files. In the WebPack configuration file, you need to specify the following two properties

  • testThe: test property tells WebPack which files need to be converted.
  • useThe: use attribute tells Webpack which loader to use for the conversion of the corresponding file.

Such as:

webpack.config.js

const path = require('path');

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

The above configuration defines a module.rules property, which has two properties: test and use. This is like telling the Webpack compiler:

“Hi, webpack compiler, when you find any file with the suffix.txt, use raw-loader to convert it and then add the converted content to the package. “

Plugins

Loaders are used to convert certain types of modules, while plug-ins can do a broader job, such as compression, optimizing programs, and even changing environment variables.

To use a plug-in, simply require() the plug-in and add it to the plugins array. Most plugins support configuration modification. Such as:

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}})];Copy the code

In the example above, use htML-webpack-plugin to generate an HTML file that is your application. The packaged file is already referenced automatically in there.

Mode

You can enable optimization built into WebPack by setting the Mode property. You can specify development, production, and None for different environments. The default is production. Such as:

webpack.config.js

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

Browser Compatibility

Webpack supports all ES5-based browsers, but not IE8 and below. Because Webpack needs import() and require(). If you need to support older browsers, use Loader.

These are the core concepts of WebPack. Keep an eye out for the next guide to organizing official Webpack documentation.

(to be continued)

Related articles

Introduction to Webpack Learning Notes (1)

Introduction to Webpack Learning Notes (2)

Introduction to Webpack Learning Notes (3)

Introduction to Webpack Learning Notes (4)