concept

Webpack is a front-end resource building tool, a static module packager. There are many resources in a front-end project that the browser may not recognize, such as Sass, less, TS, and the advanced syntax in JS. These resources must be compiled if they are to work properly in the browser. Our Webpack is designed to integrate these files and aggregate them into one file.

Webpack Core fundamentals

entry

Entry: Represents that Webpack starts packaging with that file as the entry point to analyze and build the internal dependency graph. The default value is./ SRC /index.js, but you can specify one (or more) different entry points by configuring the entry property.

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

output

Output: Indicates where the Webpack bundle output goes to the resource bundles after packaging, and how to name it. The default value for the main output file is./dist/main.js, and the other build files are placed in the./dist folder by default.

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

Loader

Loader: Webpack itself can only understand JavaScript and JSON files. Loader enables Webpack to process other files.

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

plugin

Plugins: Can be used to perform a wider range of tasks. From packaging optimizations and compression, all the way to redefining variables in your environment.

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

mode

Mode: Instructs Webpack to use the configuration for the appropriate mode. The default is production.

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

Practice a

Now that you know the core basics, it’s time to try and finish a Demo

First create a folder called “Webpack First” and then create a SRC folder below it, as shown in the figure

Then enter the NPM init command to initialize the project and install the WebPack package

Once you’ve configured your environment, you can start the Demo

First let’s create the following files in the SRC directory to prepare for later packaging.

Data. The json file

{
  "name": "Andy",
  "age": 18
}
Copy the code

Index. Js file

/* index.js: 1. Run instructions: Development environment: Webpack./ SRC /index.js -o./build/ build. js --mode=development Webpack starts with./ SRC /index.js. /build/built. Js / SRC /index.js -o./build/ build. js --mode=production Webpack starts with./ SRC /index.js. /build/built. Js */ import data from './data.json' console.log(data) function add(x, y) {return x + y; } console.log(add(1, 2))Copy the code

Then enter the packaging instructions, and add a little something here. In mode, there are development and production environments. They all end up packing different sizes of content. Finally we get the Built-in. Js file, as shown in the image below

This is the contents of the packaged file

Look, this is what we end up packaging the JS file and JSON file, and then create an index. HTML file and import it in the index. HTML file

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-break: break-word; "> < img SRC =".. /build/built.js"></script> </body> </html>Copy the code

Eventually, the HTML file will run smoothly in the browser