webpack installation and configuration instructions

Perform a reload compilation. This means compiling syntax that the browser does not recognize into syntax that the browser recognizes. For example, compiling less into css, ES6 syntax into ES5, and so on.

Reduce IO requests. Usually, after making a request, we will return an HTML to the browser. At this time, if we open the console, we will find that the browser will make another request to obtain the static resources referenced by the HTML page through script, link, and other tags. However, webpack's packaging combines all the static resources, reducing IO requests.

# Install webpack
npm install --save-dev webpack

# Install webpack-cli dependency
npm install --save-dev webpack-cli

# Create a new project
mkdir demo

# cd into the project
cd demo

# Initialize
npm init -y

# Install development version cli
npm install webpack webpack-cli --save-dev

Create a new HTML file and a JS file, and the project directory is as follows:

  demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js:

function component() {
  var element = document.createElement('div');

  // Lodash (currently imported via a script tag) is necessary for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html:

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

In package.json:

Delete "main": "index.js", add "private": true

Adjust the project directory:

  demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

To package the lodash dependency in index.js, we need to install and add the style-loader and css-loader in the configuration.

npm install --save lodash

Then adjust the content of index.js

// Add one line of code
import _ from 'lodash';

In dist/index.html, remove the imported external file lodash

Remove <script src="./src/index.js"></script>

Add <script src="main.js"></script>

Execute in the terminal:

npx webpack

The required main.js file will be packaged and generated in dist

You can also manually configure the file by creating a webpack.config.js file in the root directory

const path = require('path');

module.exports = {
  // The files to be packaged are placed here. If there are multiple files, use an array format
  entry: './src/index.js',
  output: {
    // This is the generated file name, which can also be manually modified
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Considering that running webpack locally using CLI is not very convenient, we can set a shortcut,

Add to "scripts" in package.json

"build": "webpack"

This way, you can use the npm run build command instead of the previous npx

Delete the js files in the previous dist folder, and then package again

npm run build

Take a look at the project directory

demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

No problem, the packaging is successful, and the browser displays normally

In the JS file, import a CSS file, and you need to install and add style-loader and css-loader in the configuration

npm install --save-dev style-loader css-loader

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // Added content
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

Then in the JS module:

import './style.css'

npm run build will automatically resolve and package

Load images

Download and install file-loader

npm install --save-dev file-loader

webpack.config.js:

module: {
  rules: [
    {
      test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
      ]
      },{
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
      ]
    }
  ]
}

Load fonts

Webpack Load Font Resources

Load data resources

In addition, useful resources that can be loaded include data, json files, CSV, TSV, XML, etc. In fact, json is built-in and can be directly imported using import data from './data.json'

But CSV, TSV, XML cannot be directly imported and need to be configured

Download and install in the terminal:

npm install --save-dev csv-loader xml-loader

webpack.config.js:

{
  test: /\.(csv|tsv)$/,
  use: [
    'csv-loader'
  ]
},
{
  test: /\.xml$/,
  use: [
    'xml-loader'
  ]
}

Add a json file data.json in the src directory

Then import it in index.js:

import data from './data.json'