2021-02-16

初解webpack

摘要：初步了解webpack的基本原理和配置

正文：
　　webpack是继gulp之后的一个真正意义上的项目构建工具

一、构建工具发展史

Npm Script (npm中内置的管理工具，因功能单一，需要结合其他构建工具共同使用，后续的webpack中需要结合它，作为多任务管理使用)

Grunt（Npm Script进阶版，但是需要大量配置才能使用，过于繁琐）

Gulp （真正意义上的构建工具，引入流概念）（task->run->watch->src->dest）

Fis3（百度，国产构建工具，官方不在更新，不支持最新版node）

Webpack

Rollup（类似webpack的后现代产物，生态链不够完善，需要踩坑）

……

二、选用webpack的原因

社区论坛丰富，共用插件库更新活跃

有良好的生态链和维护团队，能提供良好的开发体验并保证质量

目前webpack有大量开发者使用和验证，更好的优化了使用过程中有可能出现的问题并及时解决

根据不同时期的构建工具对比，webpack融合了多数构建工具的优点并不断完善，能更好的给项目提供一站式的解决方案

三、Webpack核心配置项

Entry （主入口文件）
Output （配置如何输出最终想要的代码）
Module （配置处理模块的相关规则）
Plugins (所需构建插件配置相关，在构建过程中注入钩子，从而实现相关个性化需求)
DevServer (本地服务，用于接收webpack通知并重新构建)
Resolve （命中规则配置）
……

四、webpack之Entry属性

//多个入口
entry: {
 a: './app/entry',
 b: ['./app/entry1','./app/entry2']
} 
//一个入口
entry: [ './app/entry1', './app/entry2']

五、webpack之Output属性

filename (输出文件名称，分动态和静态两种，静态是写死的字符串，动态可根据动态生成的chunk中name属性作为文件名称，通常以[name]方式指定)
path （输出文件存放在本地的目录，通过调用nodejs的path方法）
1
2
3
4
5
output:{
    path: path.resolve(_dirname,'dist'), //输出文件存放的目录
    filename: '[name].[chunkhash].js' //输出文件名称
    publicPath: '/assets/'//放到指定目录下
}

六、webpack之Module属性

rules(主要用于配置loader)
rules是数组形式，每一项配置都有条件匹配(正则,支持数组形式)，应用规则(数组形式，从后向前应用每个loader)
1
2
3
4
5
6
7
8
Module:{
    rules:[
        test: /\.css/, //识别以css为结尾的文件
        use: ExtractTextPlugin.extract({
            use: ['css-loader?minimize']
        })
    ]
}

七、webpack之Plugins属性

Plugin用于拓展webpack的功能，通过在构建流程里注入钩子实现，它为webpack带来很大的灵活性
1
2
3
4
5
例如：plugins:[
    new  ExtractTextPlugin({
        filename: `[name]_[contenthash:8].css`
    })
]

需要运行以上代码，需要安装extract-text-webpack-plugin插件，如果你在output属性中path的第二个参数为/dist，那么在dist文件夹下就会生成一个main_xxxxxx.css的文件
该插件的作用就是提取出js代码里的css到单独的文件，并且通过filename的模板生成文件名

八、webpack之devServer模块

devServr主要用于在开发环境下的热更新操作

devServer: { 
    //模块热替换
    hot:true,
    // 项目构建路径
        contentBase: resolve(__dirname, 'bundle'),
        // 启动gzip压缩 
    compress: true, 
    // 启用端口号 
    port: 3000, 
    // 自动打开浏览器 
    open: true 
}

九、webpack之Resolve模块

主要是对文件的命中规则进行配置

Resolve:{
    alias: {
        'button$': './src/compontents/'，//只命中以button结尾的
    },
    modules:['./src/components'，'node_modules'], //寻找第三方引入模块，默认去node_modules目录下找，有些是自定义的模块所有如果都在components文件夹下，就可以这样写
    extensions:['.js'，'.json']，//后缀补全
    mainFields: ['jsnext:main', 'browser', 'main'] //有的模块会导出两份代码，通过设置确定优先选择哪个代码
}