Webpack 1.x Learning Summary

Webpack Introduction (from github):

A bundler for JavaScript and FRIENDS. Packs many modules into a few bundled assets. Code splitting allows to load parts for the application on Demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, coffeescript, less, ... and your Custom stuff. --from GitHub

In short, it means that Webpack is a packaging tool that can be packaged with "code splitting" to include the parts needed to handle various types of files, including commonjs, amd, es6, css, iamge, and so on, through Loader.

various file processing methods:

Webpack compared to grunt according to the task, he is processing files according to the file Type. The main file types in the project are html, css, less/sass, image, TPL (template file), js. Each of the following is explained Below:

. Html:

The processing of HTML files requires that the Html-laoder,webpack.config.js configuration file be configured as Follows:　　　　

{
    test:/\.html/,
    Loader: ' Html-loader '
},

HTML For more complex operations requires the Html-webpack-plugin plug-in, as shown in the Configuration:

plugins:[
    New Htmlwebpackplugin ({
        Filename: ' a.html ',
        Template: "index.html",
        Inject: ' body ',//body head false
        Title: ' Webpack is a ',
        Chunks:[' a ']
        excludechunks:[' C '),
        minify:{
            removecomments:true,
            Collapsewhitespace:true
        }
    })
]
PS parameter description:
Filename: file name after packaging
Template: Templates Object
Inject:body/head/false (not automatically Injected)
Minify:removecomments/collapsewhitespace (compression)
Chunks: which chunk are included
Excludechunks: does not contain which chunk
Custom parameters: can be obtained by <%=xxx%> in the template
Compilation.assets[path].source (): Inline Insertion

. Js:

Webpack can handle ordinary js, for ES6 (CSMAScript-262 sixth modification, also called ECMA2015) syntax needs to be converted to ordinary js, so need a converter--babel,babel need to know what ES6 features you want to Convert. By presets you can set, convert which features, set the value of presets to latest or env to convert all the features, configured as Follows:

module:{
    loaders:[
        {
            test:/\.js$/,
            Loader: ' Babel-loader ',
            Include:path.resolve (__dirname, "src"),
            Exclude:path.resolve (__dirname, "node_modules"),
            query:{
                presets:[' Latest ']
            }
        }
    ]
}
Because Babel processing is time-consuming, special include (specify which paths to Scan) and exclude (specify which paths are excluded from the Scan)

. Css:

Css-loader for working with CSS files style-loader for inserting css-loader processed files into the page (creating a style Label)

{
    test:/\.css$/,
    Loader: ' Style-loader!css-loader '
},

. Css/less:

Less files are processed through less-loader, Css-loader and Style-loader are still required after processing, and Post-css-loader (increased browser prefix) is required if required

{
    test:/\.less$/,
    Loader: ' Style-loader!css-loader!less-loader '
}

. jpg ...:

Processing picture files can use File-loader and url-loader, the difference between the Two: File-loader is responsible for loading the picture, Url-loader can set a limit value, when the picture size is larger than the threshold value when using File-loader load, When the image is smaller than the threshold, it is hardcoded into the base64 format and added to the File. The configuration is as Follows:

{
    Test:/\. (jpg|png|gif|svg)/,
    Loader: ' File-loader ',//url-loader
    query:{
        Name: ' static/[name]-[hash]. [ext] ',
        Limit: ' 20000 '//unit b
    }
    Test:/\. (jpg|png|gif|svg)/i,
    loaders:[
        ' url-loader?limit=20000&name=assets/[name]-[hash:5]. [ext] ',
        ' Image-webpack '
    //]

}

. TPL

TPL mainly refers to the various template files used in the project, such as Ejs/jade ..... We need to install the response "loader", take Ejs as an example, first to install Ejs-loader

{
    test:/\.tpl/,
    Loader: ' Ejs-loader '
}

Know just webpack packing the tip of the iceberg, continue to follow Webpack ....

Webpack 1.x Learning Summary