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