webpack1.x学习总结

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中。。。。

原文链接：https://www.cnblogs.com/codeww/p/7286516.html
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。