Webpack main features

  • Escape code (ES6 to ES5, SCSS to CSS)
  • Build the build
  • Code compression
  • The code analysis

Set a few small goals before you learn webpack, and take it one step at a time

  1. Escape JS with Webpack
  2. Understand the purpose of hash in file names
  3. Webpack generate HTML
  4. Introduce CSS with Webpack
  5. Webpack introduced SCSS
  6. Webpack introduces LESS and Stylus
  7. Webpack introduces images
  8. Using lazy loading

The documentation for Webpack needs to be selective, not exhaustive

Webpack installation

Google Webpack getting Start

Copy by order

Webpack can be installed globally or under a project

I installed it under the project and specified the version number

NPM install webpack@4 webpack-cli@3 --dev or yarn add webpack@4 webpack-cli@3 --devCopy the code

Goal one webpack escapes JS

Next create a SRC directory and create index.js in SRC

Then try to escape the JS file using Webpack

/node_modules/.bin/webpack // Run webpack like this./node_modules/.bin/webpack //Copy the code

We have an additional dist directory, which contains the files generated by WebPack

A warning appears on the console. Use Google to search webpack Configuration Mode and find the official website

In the concept there is configuration

To create a webpack.config.js file, write the following code to change./foo.js to index.js in the directory and run webpack

var path = require('path');

module.exports = {
  mode: 'development'.entry: './src/index.js'.output: {
    filename: 'foo.bundle.js'}};Copy the code

If foo. Bundle. js generated by dist directory is filename in output, you can change it to [name].js and run webpack to get a main.js file from dist directory

Complete webpack escape js

Understand the purpose of hash in file names

Make the packaged file have a hash attached, as follows

Run webpack and see the file name of main

Why is it set like this

Referring to HTTP caching – cache-control in the HTTP response header can see if HTTP caching is used

For example, when we visited Baidu.com for the first time, Baidu returned several files: index.html, 1.css, 2.css, 1.js, 2.js. We put 1.css, 2.css, 1.js, 2.js into the cache or hard disk and set the expiration time.

On the second visit to Baidu.com, you only need to download index.html, and other files can be obtained from memory or disk.

So how are these files that are stored in cache or on disk updated,

Update according to the file name. If the downloaded index.html references CSS and js file names are different from those previously saved, the files will be downloaded again for update.

The hash attached to the file name makes it easy to make the file name unique and also solves the problem of file naming.

Webpack generate HTML

Google Webpack HTML, find an HtmlWebpackPlugin, install

Yarn add html-webpack-plugin --dev or NPM install html-webpack-plugin --devCopy the code
/*webpack.config.js*/

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path')

module.exports = {
    mode: 'development'.entry: './src/index.js'.output: {
        filename: '[name].[contenthash].js'
    },
    plugins: [new HtmlWebpackPlugin()]
}
Copy the code

Running WebPack generates an HTML page in Dist

If you want to use your own custom HTML file, do the following

Create your own HTML first

<! --src/assest/test.html-->
<! DOCTYPEhtml>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <div id="app1"></div>
</body>

</html>
Copy the code

Then configure and run Webpack to see what happens

Introduce CSS with Webpack

Google WebPack CSS Loader

Follow the documentation, install, write the CSS, and then import, as if also need a style-loader to install, it is ok

Use the webpack – dev server. –

The HTML file is generated, so how should I preview it? Do a Google search for webpack-dev-server and find the official documentation

The installation

yarn add webpack-dev-server --dev
Copy the code

In the package. The json to write"start":"webpack-dev-server"

You can then run yarn start

Webpack introduced SCSS

Prepare an SCSS file

/* src/y.scss */
body{
	background: yellow;
}
Copy the code

And then in index.js

import './y.scss'
Copy the code

Sass-loader and Dart-sass need to be installed. Node-sass is not recommended

yarn add sass-loader dart-sass --dev
Copy the code

Webpack sometimes uses Node-sass. How to switch to Dart-sass

/*webpack.config.js under module.rules */
{
                test: /\.scss$/i,
                use: [
                    // Generate JS strings as style nodes
                    "style-loader".// Convert CSS to CommonJS modules
                    "css-loader".// Compile Sass to CSS
                    {
                        loader: "sass-loader".options: {
                            implementation: require('dart-sass')  / / use the dart - sass}}},],Copy the code

Webpack introduces LESS and Stylus

Importing less and Stylus is the same as importing SCSS, only the loader installed is different

Webpack introduces images

Prepare an image, as shown

Import the image in index.js and add it to the element

The loader used is file-loader, which is simple to use

 {
       test: /\.(png|jpe? g|gif)$/i,
       use: [{
            loader: 'file-loader',}],},Copy the code

running

Using lazy loading

Prepare a lazy.js

/* src/lazy.js */
export default function lazy(){
	console..log('I'm a lazy loading module')}/* src/index.js */

const button = document.createElement('button')
button.innerText = 'Lazy loading'
button.onclick = () = > {
    const promise = import('./lazy')
    promise.then(module= > {
        console.log(module)
        const fn = module.default
        fn()
    }, () = > {
        console.log('Module loading error')
    })
}
app1.append(button)
Copy the code

Ok, so what it does is, when I click the button, the console prints out ‘I’m a lazy loading module’