Webpack learning path (1) basic configuration

What is Webpack?

From the official website:

In essence, 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.

Key features of the current release

The latest version is v4.32.2, and webpack4 has been updated with many new features

• Node.js 4 is no longer supported
• Remove CommonChunkPlugin and add Optimization
• Support WebAssembly
• Supports multiple module types
• Add mode configuration
• Zero configuration module packaging
• Faster build time, 98% speed increase

configuration

1.entry

Webpack is a module packer, no matter what resources will be packaged into modules, there are reference relationships between modules, so we will build a relationship dependency map, so we need an entry file, from this entry step by step to find dependencies, load modules.

We need the configuration in webpack.config.js

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

The example above is a single-entry configuration for a single-page application, so if it is a multi-page application, the configuration will need to be changed

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

Multiple entries need to be defined as Object objects, and key will be used later

2.output

The Output attribute tells WebPack where to export the bundles it creates and how to name these files, with the default being./dist.

Only one output can be specified, whether single or multiple

• filenameThe name of the output file.
• Target output directorypathThe absolute path to.

The configuration of single entry is as follows

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'}};Copy the code

Multiple entry configuration

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'}}Copy the code

Filename should use a placeholder to ensure that each file has a unique name, and the placeholder value is the key in the entry

3.mode

Mode is a new feature in webpack4. Offer two options:

All in all, the default plug-in for the current environment is enabled by default, making it easier to develop or package output. You can configure it directly in webpack.config.js or add parameters directly to the command

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

webpack --mode=production
Copy the code

4.loaders

Webpack only has JS and JSON file types out of the box. If you want to support source code conversion of other file types, you need loader. For example, ES6 conversions require babel-Loader, CSS conversions require CSS-Loader, and typeScript conversions require TS-Loader.

Loader itself is a function that takes the source file as an argument and returns the result of the conversion.

It is recommended to specify loader in the webpack.config.js file:

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true}}]}Copy the code

Note: In the case of multiple Loaders, the execution order is from right to left. Pay attention to the writing order.

5.plugins

Plug-ins are the backbone of Webpack, and are enhancements to webPack. You can do optimized compression of packaged files, resource management, environment variable injection and other things that loader cannot achieve.

The Webpack plug-in is a JavaScript object with the Apply attribute. The Apply attribute is invoked by the Webpack Compiler, and the Compiler object is accessible throughout the compile life cycle.

In other words, plugins can be used throughout the build process.

Since plug-ins can carry parameters/options, you must pass a new instance to the plugins property in the WebPack configuration.

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Install const webpack = require('webpack'); // Access the built-in plugin const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'}})]; module.exports = config;Copy the code

Link to the article

Webpack Learning path (5) Loader introduction and common loader introduction

Webpack-hot-middleware enables hot updates

Webpack-dev – Middleware

Webpack-dev-server implements hot update

I am moving forward.