webpack 1.x 学习总结

Posted 2020-10-01

webpack介绍（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

总之意思就是说webpack是一个打包工具，他可以通过“代码分割”打包的时候包含所需要的部分，通过loader处理各种类型包含commonjs、amd、es6、css、iamge等等各种类型的文件。

各类文件处理方式：

　　webpack相比较grunt按照任务执行操作，他是根据文件类型处理文件。项目中主要的文件类型有html、css、less/sass、image、tpl(模板文件)、js.下面分别进行说明：

　　.html:

　　　　处理html文件需要html-laoder，webpack.config.js配置文件中的配置方式如下所示：　　　　

{
    test:/\.html/,
    loader:‘html-loader‘
},

　　　　html进行更加复杂操作需要html-webpack-plugin插件，配置如下图所示：

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参数说明：
Filename:打包后文件名
Template:模板对象
Inject:body/head/false(不自动注入)
Minify:removeComments/collapseWhitespace（压缩）
Chunks:包含哪些chunk
excludeChunks:不包含哪个chunk
自定义参数：可在模板中通过<%=xxx%>方式获取
compilation.assets[路径].source()：内联插入

 　　.js:

　　　　webpack可以处理普通js,对于es6(CSMAScript-262第六次修改，也叫ECMA2015)语法需要转换成普通js,因此需要一个转换器--babel,babel需要知道你想要转换哪些es6特性。通过presets可以设置，转换哪些特性，设置presets的值为latest或者env则转换所有特性，配置如下：

module:{
    loaders:[
        {
            test:/\.js$/,
            loader:‘babel-loader‘,
            include:path.resolve(__dirname,"src"),
            exclude:path.resolve(__dirname,"node_modules"),
            query:{
                presets:[‘latest‘]
            }
        }
    ]
}
因为babel处理比较耗时，特制定include(指定扫描哪些路径)与exclude（指定扫描排除哪些路径）

　　.css:

　　　　css-loader用于处理css文件 style-loader用于将css-loader处理后的文件插入到页面中（建立style标签）

{
    test:/\.css$/,
    loader:‘style-loader!css-loader‘
},

　　.css/less:

　　　　less文件通过less-loader处理，处理后仍需要css-loader和style-loader，如有需要还需要post-css-loader(增加浏览器前缀)

{
    test:/\.less$/,
    loader:‘style-loader!css-loader!less-loader‘
}

　　.jpg...:

　　　　处理图片文件可以使用file-loader和url-loader,两者的区别：file-loader负责加载图片，url-loader可以设置一个limit值，当图片大小大于该阈值时使用file-loader加载，当图片小于该阈值时会被硬编码成base64格式，添加到文件中。配置如下所示：

{
    test:/\.(jpg|png|gif|svg)/,
    loader:‘file-loader‘,//url-loader
    query:{
        name:‘static/[name]-[hash].[ext]‘,
        //limit:‘20000‘ //单位b
    }
    //test:/\.(jpg|png|gif|svg)/i,
    //loaders:[
    //    ‘url-loader?limit=20000&name=assets/[name]-[hash:5].[ext]‘,
    //    ‘image-webpack‘
    //]

}

　　.tpl

　　tpl主要是指项目中用到的各种模板文件，比如ejs/jade.....我们需要安装响应的“loader”，以ejs为例，首先要安装ejs-loader

{
    test:/\.tpl/,
    loader:‘ejs-loader‘
}

　　了解到的只是webpack打包冰山一角，持续跟进webpack中。。。。