webpack小白笔记

从来没有自己配置过，但是好想自己啃啃它
所有代码都在github
目录结构

配置文件都写在config底下了

运行

webpack --config=config/webpack_3.config.js

各工具版本

• webpack 4.42.0
• node 10.16.0
• npm 6.9.0

webpack_1

主要是测试webpack的默认输入输出功能

entry

属性不设置的话，webpack启动时会去寻找./src/index.js。如果没有此文件会报错
【有一点困惑，默认值是./src/index，但是如图我的src/index和webpack_1.config.js并不是同一级，但是打包还是会打包成功生成dist文件夹，dist跟src是一级，我把src移到webpack_1 folder里就失败】

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/lorry/workspace/up2/webpack'

output

不设置的话就会自动创建dist folder并输出打包结果

webpack_2

测试多入口和多出口的情况
entry可以是string、array、object类型，在不设置output属性时

• entry属性值是string、array时，打包并生成dist/main.js
• entry属性值是object时，不管有没有设置output属性都会生成相同数量的打包后的文件

module.exports = {
    entry: {
        test1: './webpack_2/main.js',
        test2: './webpack_2/main1.js',
    },
    output: {
        path: `${absoluteRoute}/dist`,  // 必须是绝对路径
        filename: '[name].js'
    }
}

// 生成
webpack_2/dist/test1.js  webpack_2/dist/test2.js

• [id]chunk id
• [name]是entry的key值
• [hash] 本次构建过程 唯一生成的hash
• [chunkhash] 基于每个chunk内容生成的hash

[hash]

如下，如果filename: ‘[name][hash].js’

[chunkhash]

webpack_3

主要用来测试以下loader以及常用属性、typescript

• style-loader 通过import/require引用的css文件以style标签的方式打包到html文件里
• css-loader 可以在js文件中引入css文件
• file-loader 打包文件并输入到指定folder
• url-loader 功能类似于file-loader。但是但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。大于的话默认使用file-loader处理；它不会将资源打包到output folder

使用url-loader处理后使用

使用file-loader

测试了一下url-loader的功能
有两张图a.png【36kb === 36864byte】 b.jpeg【83kb === 84992byte】。
loader配置如下

 {
                test: /\.(png|jpe?g)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]', // 可提供function
                        outputPath: 'assets/',
                        limit: 36864, // byte
                    }
                }]
}

按照文档说的图a应该是使用url-loader处理，b使用file-loader处理
看一下请求，符合预期

oneOf

可实现对同一类型文件使用不同loader处理，当规则匹配时使用指定loader，不匹配时使用其他规则

css

background: url('./assets/a.png?a') no-repeat center center;
background: url('./assets/b.jpeg') no-repeat center center;

loader配置

{
                test: /\.(png|jpe?g)$/,
                oneOf: [{
                    resourceQuery: /a/,   // 
                    use: 'url-loader',
                },{
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]', // 可提供function
                            outputPath: 'assets/',
                        }
                    }]
                }]
}

根据配置,图a采用url-loader，b使用file-loader

处理typescript

安装ts-loader typescript

plugins待整理~~~~

/------------接上文--------------/
plugins

webpack_4

typescript的webpack配置