Shulou(Shulou.com)06/01 Report--

This article will explain in detail what you have learned about the front-end modular tool webpack. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

In front of the story,

Webpack heard about it some time ago, and now I have reached the 3.x version, and I haven't contacted it. Because I used gulp as my own project build tool. Now it feels like the trend of gulp usage is decreasing. It's nice to get in touch with webpack these days, and its modular packaging mechanism brings benefits to both front-end development and performance. This is not to say that gulp is bad, and there is no comparison between the two.

Introduction to webpack 1. (quotes a sentence from webpack's official website):

Webpack is a module baler (module bundler) for modern JavaScript applications. When webpack processes an application, it recursively builds a dependency graph (dependency graph) that contains each module the application needs, and then packages all of these modules into a small number of bundle-usually only one, loaded by the browser.

It is highly configurable, but you need to understand four core concepts before you begin: entry, output, loader, and plugins.

two。 Personal understanding:

All that's said here is that it can treat the resource files in the project as modules, and then package them into a small amount or a file, and then we reference the file.

3. Doubt:

You may wonder here, at that time, I also thought, how can we do this? Why is it packed into a file? So what about js,css, pictures and so on? I never thought it could be like this. What can I do? I have no choice but to believe it.

4. Feeling:

In fact, to learn a tool, we just need to know what it can do and then how to use it, but sometimes we don't have to delve into the details of its implementation. We just need to know what it is, not why. Feel free to use this thing, it is already a tool. It's like driving a car, we just need to learn how to drive, and we don't have to care too much about why he can drive, and become an old driver when he drives too much, isn't it? It is enough that tools can bring us convenience. Unless you make tools. But if you are very interested in webpack, you can check it out on its github.

What webpack can do:

It says that webpack can package modules, but in fact, there are many functions.

Webpack can translate Js. At present, many browsers do not support es6, but we want to use the syntax of es6. Webpack can convert es6 syntax into es5 syntax.

Webpack can translate the preprocessing languages of css such as less,sass,stylus.

Webpack can be hot updated.

Webpack can process, compress, and convert pictures into base64 format.

Webpack can compress the code.

Webpack can check syntax, generate automated html templates, and so on.

The above examples are commonly used and have much more functions. All are implemented through webpack's loader and plugins, which can be said to be very powerful.

Webpack installation:

The premise is nodejs and npm, search for installation on the Internet, now nodejs will have npm, so you can install nodejs directly.

Run through cmd (using the win operating system): if both node-v and npm-v can return the version number, the installation is successful.

Then formally install webpack and run it on the command line:

/ / Global install npm install-g webpack// create a folder mkdir webpack-demo// enter the project cd webpack-demo// initialization, generate the default package.json file npm init-save-dev// / install webpacknpm install webpack--save-dev// in the current project and install it successfully here

Feeling: the whole process is similar to installing gulp, which is the installation process of npm module.

When it comes to npm, it is recommended to use cnpm Taobao image in China, which is very good and much faster. You can also visit the official website of npm to inquire about the modules you want to see, all of which have a detailed description of the modules.

Key file of webpack: webpack.config.js

Webpack.config.js is the configuration file for webpack that configures the webpack in the project.

The plug-ins and loader used in the file need to be installed with npm on trial first:

/ / install css-loadernpm install css-loader-- save-dev// install htmlWebpackPluginnpm install html-webpack-plugin-- save-dev

Create a new simple webpack.config.js file in the project root directory:

/ / introduction module const webpack = require ('webpack'); const path = require (' path'); const htmlWebpackPlugin = require ('html-webpack-plugin') / / configure const config = {entry:'. / path/to/my/entry/file.js', output: {path: path.resolve (_ _ dirname, 'dist'), filename:' my-first-webpack.bundle.js'}, module: {rules: [{test: /\ .css $/, use: 'css-loader'}]}, plugins: [new HtmlWebpackPlugin ({template:'. / src/index.html'})]}

The key things in this file are mentioned above: four core concepts: entry, output, loader, and plugins. If you understand these four core things, webpack will know about it, or at least how to use it.

The role of each core:

Entry: the entry file, that is, the file you want to be packaged, can be one or more.

Output: input file, indicating where the packaged file will be exported, one or more.

Module: module in which the rules is an array, and the loader,loader needed in the project can perform a series of processing on the resource files. Common loader:style-loader,css-loader,less-loader,babel-loader,url-loader and so on.

Plugins: plug-ins that add the required functionality to webpack, such as the automatic generation of html template plug-ins in the example.

What is the experience of the front-end modular tool webpack is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.