webpack configuration items detailed study

About webpack I believe that most front-end engineers are familiar with, and are also often used. But then, most of the time is a direct take a direct ride scaffolding, with something on the matter, knowing but not the why of this state make people uncomfortable. So take advantage of the recent busy, and quickly the whole wave;

webpack is doing in?

   With my own understanding of the word is, the more files used in the project, such as .js, .css, .less, .png and so a good number of files processed into one or several files, and html cite just get away a.

Packaging dim?

  The most obvious, a page load than load a bunch of js js, a bunch of css, speed, speed obvious bunch of pictures. There you pack the code is compressed, not easy for someone else to get to know. Traditional F12 page just a bit, what with the frame, can get a clear idea about the basic structure. Demand loading, I use what I gave the whole what, do not added to the code, potentially reducing the amount of code. Also some other benefits (think of it in Canada, laughs).

Chant began to learn

First adjust a few essential configuration items:

const path=require('path');// nodejs里面的路径模块
module.exports={
    // 入口
    entry:{
        app:'./src/index.js',
    },
    // 输入
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist'),
    },
    // 文件解析器
    module:{
        rules:[]
    },
    // 插件
    plugins:[],
}

These four are the most critical configuration items:

entry is to tell webpack where to start packing your code, this must have one or more

output is told webpack finished packing my code Jiaosha (filename), where (path), which packed into a few (depending on entry a few)

module is to determine how to deal with css, less, png and a series of not js files, commonly used css-loader, style-loader, file-loader , the specific usage is as follows:

 module:{
    rules:[
        {test:/\.(css|less)$/,use:['style-loader','css-loader']},
        {test:/\.(png|svg|jpg|gif)$/,use:['file-loader']},
        {test:/\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader']}
    ]
},

With regular screening to suffix, use to determine the need to use the loader, but also include other parameters to determine which file folder inside the handle

plugins is used to configure a number of plug-ins to assist in packaging, note this is an array, which is an example of a new item of

. . . To be continued