Webpack

webpack是一个静态模块打包工具，作用是分析、压缩、打包代码

//webpack.config.js
module.exports = {
    entry: './src/main.js', //入口可以是相对路径，出口必须绝对路径
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

loader

webpack本身只支持打包js文件，其他类型需要使用loader

//webpack.config.js
module.exports = {
   module:{
        rules:[
            {
             	test: '\.css$/i',
                use: ["style-loader", "css-loader"]
            } //第一個把js内的样式插入DOM上；第二個识别css文件 从右往左执行
        ]
    }
}

图片处理机制

base64:

​ 好处：可以减少网络请求次数，把图片放在js文件里

​ 坏处：会增加30%体积，所以限制了大小上限

开发服务器

打包在运行内存里，效率更高

mode：

​ development：开发环境，进行打包时不会压缩混淆代码

​ production：生产环境，会压缩混淆代码，导致更慢（默认模式）