preface

With the increasing complexity of front-end applications, developing Web applications by directly writing JavaScript, CSS and HTML can no longer cope with the development of current Web applications. Front-end engineering has attracted more and more attention. Many front-end construction tools stand out, and WebPack is the most popular packaging construction tool at present. Therefore, every front-end ER needs to master Webpack technology.

start

The installation

First, make sure you have Node installed in your environment, with a version greater than 5.0.0

Run the command to install to the project directory, you can also install to the global, but the machine is not recommended, because of the different versions of the project will cause problems

npm install webpack webpack-cli -D
# or
yarn add webpack webpack-cli -D
Copy the code

Webpack – CLI is the command line tool of Webpack. It is removed after Webpack 4 and needs to be manually installed

First packing experience

Once installed, create a new file, webpack.config.js, and add the following configuration

const path = require('path')

module.exports = {
  entry: './src/js/index.js'.mode: 'production'.output: {
    filename: 'bundle.js'.path: path.join(__dirname, './dist')}}Copy the code

Entry is the entry file, webpack will analyze the dependency graph from the entry file, mode is the mode, including production mode and development mode, output is the information of the output file, but pay attention to the output path must be an absolute path, otherwise an error will be reported

Then we create a new SRC directory, create a js directory and create two new JS files, index.js (the same as entry) and foo.js (name it whatever you want), and add the following code, respectively

// index.js
import { add } from './foo'

const res = add(1.3)
console.log(res)

// foo.js
export function add(a, b) {
  return a + b
}
Copy the code

Then run the command NPX webpack, or you can create a new script: “build”: “webpack” in package.json and run the command NPM run build to see the packed code

Open the compiled bundle.js

Output 4 directly, because ES6 modularity is used, if replaced with Commonjs the result will be to package a function

CommonJS is a run-time loading interface, while ES6 is a compile-time output interface

Of course, this is all digression, today’s main character is Webpack, get down to business

Local development

Every time you rewrite code, you have to build it once to see the effect, which would take a long time to build as the project grows larger, so WebPack has a built-in development server that automatically compiles when the code changes

You need to install webpack-dev-server

npm install webpack-dev-server -D
# or
yarn add webpack-dev-server -D
Copy the code

Then add script to package.json as follows

// <=webapack4
"serve": "webapck-dev-server"
// After Webpack 5, the development server commands were integrated into Webpack-CLI, but dependencies still need to be manually installed
// >=webpack5
"serve": "webpack serve"
Copy the code

Running this command opens a static file server, since we haven’t written the HTML file yet. Create a new HTML file under SRC and write the content

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>webpack</title>
</head>
<body>
  <h2>Hello webpack</h2>
</body>
</html>
Copy the code

Then install the HTML plug-in

npm install html-webpack-plugin -D
# or
yarn add html-webpack-plugin -D
Copy the code

Add the following configuration in webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html') // Specify the template location})].devServer: {
  contentBase: path.resolve(__dirname, 'dist') // Read the content position
}
Copy the code

Then run the serve command and open the browser (default port is 8080, +1 if occupied) to see the effect

This section gives an overview of webPack packaging and development servers, and the next section starts with more detailed configuration

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event