01.webpack的认识

1.为什么要用webpack

1.1 浏览器的运行效率问题

我们如果不使用任何打包工具，还是按照最原始的写法，其实在开发中就会变得麻烦，比如说我们如果编写的代码文件比较多，此时我们就需要发送多次http请求，如果其中一个文件没有请求回来，此时如果 下面的文件对该文件存在一些依赖，就会导致页面中的部分功能没有办法实现
再者说如果我们将代码编写入一个文件中，此时就会出现文件大小很大，并且也会导致作用域的问题，代码不好维护

1.2 浏览器对新技术的支持度不够

比如说我们编写一些比较高级的语法，但是部分浏览器是不支持的，此时我们就需要设置一些pollfill去解决该问题。在例如我们编写的TS和Vue文件，这些浏览器都不能识别，而webpack就会使用对应的babel对其进行转化，转化为浏览器可以识别的文件

1.3 webpack对文件的处理

webpack中存在五大模块。Entry,Output,Loader,Plugins,Mode。首先会根据入口文件进行收集依赖，并且在Output中进行输出依赖，并且在其中使用loader和plugins对文件进行相应的转化

2.webpack中的代码拆分，dev环境和prod环境下面的配置

2.1 path.js文件目录查找文件

const path = require('path')

const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')

module.exports = {
    srcPath,
    distPath
}

2.2 webpack.common.js

● 代码中全部公共配置，可以通用的配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { srcPath, distPath } = require('./paths')

module.exports = {
    entry: path.join(srcPath, 'index'),
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader'],
                include: srcPath,
                exclude: /node_modules/
            },
            // {
            //     test: /\.vue$/,
            //     loader: ['vue-loader'],
            //     include: srcPath
            // },
            // {
            //     test: /\.css$/,
            //     // loader 的执行顺序是：从后往前（知识点）
            //     loader: ['style-loader', 'css-loader']
            // },
            {
                test: /\.css$/,
                // loader 的执行顺序是：从后往前
                loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
            },
            {
                test: /\.less$/,
                // 增加 'less-loader' ，注意顺序
                loader: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html'
        })
    ]
}

2.1.1 postcss-loader来处理浏览器的兼容性

● 利用postcss-loader来处理浏览器的兼容性，添加postcss.congfig.js中，配置postcss可以用来自动添加css的前缀，可以增加浏览器的兼容性
● postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')]
}
2.1.2  babel-loader,webpack默认只认识js文件
● babel将es6等高级写法，转化为es5写法
● 利用.babelrc或者babel.config.js文件来处理babel的预设
{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

2.3 webpack.dev.js

● 在开发环境下面的配置，利用webpack-merge，进行代码合并
● file-loader:直接打包图片资源，存在问题：就是在页面发起请求时，每张图片都会发起资源请求

const path = require('path')
const webpack = require('webpack')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')

module.exports = smart(webpackCommonConf, {
    mode: 'development',
    module: {
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            // window.ENV = 'development'
            ENV: JSON.stringify('development')
        })
    ],
    devServer: {
        port: 8080,
        progress: true,  // 显示打包的进度条
        contentBase: distPath,  // 根目录
        open: true,  // 自动打开浏览器
        compress: true,  // 启动 gzip 压缩
        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',
            // 将本地 /api2/xxx 代理到 localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
    }
})

2.4 webapck.prod.js

● url-loader:可以配置判断图片大小来进行打包，在小于指定大小的时候，图片采用base64格式产出，这样不会发出多余的请求,减少http的资源请求

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { smart } = require('webpack-merge')
const { srcPath, distPath } = require('./paths')

module.exports = smart(webpackCommonConf, {
    mode: 'production',
    output: {
        filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
        path: distPath,
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },
    module: {
        rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,
                        // 打包到 img 目录下
                        outputPath: '/img1/',
                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
        new webpack.DefinePlugin({
            // window.ENV = 'production'
            ENV: JSON.stringify('production')
        })
    ]
})