这是我参与「第四届青训营 」笔记创作活动的的第21天

为什么学习weboack

• webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
• 能被模块化的不仅仅是 JS 了。
• 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
• 高级前端的必经之路

webpack是什么

webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代Javascript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

webpack的作用

1. webpack里就有底层代码可以支撑我们进行模块化开发，AMD、CMD、CommonJS、ES6这些模块化方案全都支 持，并且会帮助我们处理模块之间的依赖关系。
2. 浏览器不能识别例如less，es6，等等语法，webpack可以在打包的过程中，把这些转换成浏览器可以 识别的css，es5，JavaScript等等操作。

webpack运行过程

webpack配置

基本配置

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist'),
    },
    devServer: {
        proxy:{
            '/api':{
                target:'https://api.github.com',//目标服务器的地址
                pathRewrite:{
                    '^/api':'' 
                },
                changeOrigin:true
            },
        }

    },
 }

webpack配置模块

module: {
    rules: [
        {
            test: /.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /.jpg$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10 * 1024 // 10 KB
                }
            }
        }
    ]
},

webpack配置plugins

plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        title:'HtmlWebpackPluginPage'
    }),
    new CopyWebpackPlugin([        'public'    ])
]

课后重点学习

钩子的核心信息

1. 时机：编译过程的特定节点，webpack会以钩子的形式去提醒插件此刻正在发生什么事情
2. 上下文：通过tapable提供的回调机制，以参数形式传递上下文信息
3. 交互：在上下文参数信息中附带了很多存在side effect的交互接口插件可以通过这些接口改变。