Learning perception of webpack

As a popular front-end framework, webpack can package js, css, html, less, jade and other files, and is widely used. Even some popular front-end frameworks are using webpack packaging tools, such as vue, react and so on. In the spirit of sharing on the Internet, I will share my own understanding and thoughts with everyone.

1. Installation

1.1 Set up global webpack

npm install -g webpack

1.2 Enter the target folder, I use the file directory (E:\webpack-test)

cd  E:\webpack-test

1.3 Guide the creation of a package.json file in the project

npm init

1.4 Install webpack

npm install webpack --save-dev

–save-dev The installation package information will be added to devDependencies (dependencies in the development phase), so it is generally used in the development phase) After the installation is complete, the node_module folder will appear in the project directory to prove that the installation is successful.

2. Use it with me

2.1 Create a new file test1.js in the project directory and write a function at will. Then pack

function test(){
    console.log(‘1‘)
}

2.2 Start packing

Enter webpack test1 (file entry) in the command line. test-pack.js (packaged complete name).

2.3 Packaged

After the packaging is complete, the command line will return several parameters, 1. Hash-hash value 2, Version-webpack version, Time: packaging takes a long time.

Fortunately, return a list of Asset-the file generated this time, Size-the size after packing, Chunks-the block packed this time, and Chunk Name-the name of the block packed this time.

2.4 Open the test-pack.js file

We found that the file seems to be larger than before packaging, because webpack will generate some required built-in functions before packaging. You can see our packaged code at the bottom of the page.

3. webpack packs css files

Note that css files can be referenced in js files in wenpack.

3.1 Create a new css file named style.css

Write some css code in it.

3.2 Reference css in the test.js file

test.js all code

require(‘./style.css‘)
function test() {
    console.log(‘1‘)
}

3.3 Package css

But you need to install css-loader and style-loader before packaging, otherwise an error will be reported.

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

The style-loader is to make css take effect. The effect after taking effect is to automatically create a style tag and insert the code in the head tag of the html page (this later case will talk about), and css-loader is to let the packaging software recognize css and process css files.

3.4 Run the packaging command

webpack test1.js test-pack.js-but there will be an error message-You may need an appropriate loader to handle this file type. Why does it report an error if the loader is already installed.

To solve the error, the root directory is the new wenpack.config.js file under webpack-test and write the following code. It can be solved. The cause of the error is that no loader is specified.

var Webpack = require("webpack");
module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    }
}

Or add css-loader when introducing css!, prefix is enough

require('css-loader!./style.css');

3.5 Packaged

After the packaging is complete, we see that there are more codes introduced by webpack in the test-pack file. In the middle part of the code, you can see the css we just wrote, which shows that our css has been successfully introduced.

4. How to achieve multi-file packaging

In some single-page applications, it is generally packaged into a liberal arts, such as the official website (for example) can also be packaged into a multi-page application. But how to configure it. It’s very simple, just configure the webpack.config.js file.

The code is as follows, after the configuration is complete, enter webpack in the command line, because webpack.config.js has been configured. There is no need to enter a long sentence like the case above.

var path = require(‘path‘) // Here is the path module that introduces node.js
module.exports = {
    entry: {
        main1:‘./src/script/main.js‘,    // If the value here specifies an array, then it is equivalent to packing two files into one file
        main2:‘./src/script/main2.js‘,
    }, // Multi-file entry file configuration If it is a single file, you only need to write a .string path
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘), // The absolute path address of the packaged file
        filename: ‘[name].js‘ // The packaged file name [name] is like the key (main1) under the entry of the month, and there are options such as hash and chunkhash, but it is generally not used, so I will not just take the name as an example. If the [] variable placeholder is not written here but a normal string, the packaged file will be overwritten, and only the last packaged file will be left at the end.
    },
};

5. After the chunkhash is used, the file generates a dynamic name, so how can the script be referenced?

In some large-scale projects, it is necessary to upload to the server remote warehouse. At this time, chunkhash is very effective, because chunkhash only changes after the file is modified, and the control of the code is relatively strong. But after chunkhash is changed, the reference name of script also needs to be changed. Isn’t it troublesome to do so, but there is a way to solve it. Please see the code.

Install npm install html-webpack-plugin –save-dev

var path = require(‘path‘);
var htmlWebpackPlugin = require(‘html-webpack-plugin‘); // Import module

module.exports = {
    entry: {
        main1: ‘./src/script/main.js‘,
        main2: ‘./src/script/main2.js‘,
    }, // Multi-file entry file configuration If it is a single file, you only need to write a .string path
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘), // File address after packaging
        filename: ‘[name]-[chunkhash].js‘ // The packaged file name [name] is like the key (main1) under the entry of the current month
    },
    plugins: [
        new htmlWebpackPlugin({
            template: ‘index.html‘  // Specify the template file, if not specified, a new index.html file will be automatically generated and packaged to the packaging address specified by path. If specified, the specified template will be packaged and put into the packaging address specified by path, and then automatically use the src of the script to import all the files under the entry
        })
    ]
};