技术博客文章总结

webpack

基础篇

webpack 基础配置

const path = require('path')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
}

webpack 打包文件解析

Html 插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html', // 生成的文件名
            template: './src/index.html', // 模板
            inject: 'head', // 插入方式
            title: '自定义标题', // 标题
            favicon: './icon.ico', // favicon图
            minify: { // 压缩
                removeAttributeQuotes: true, // 移除属性的引号
            },
            chunks: ['page1'], // 包含的代码块, 适用于多页应用
        })
    ]
}

注意：inject有四个值： true body head false

true： 默认值，script标签位于html文件的 body 底部 body： script标签位于html文件的 body 底部 head： script标签位于html文件的 head中 false： 不插入生成的js文件，这个几乎不会用到的

处理样式

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.styl$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
        ]
    }
}

注意：安装 sass-loader 需要同时安装 node-sass

转换 ES6+等高级语法

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env'
                            ],
                            plugins: [
                                // 转es7
                                ['@babel/plugin-proposal-decorators', {"legacy": true}],
                                ['@babel/plugin-proposal-class-properties', {"loose": true}],
                                "@babel/plugin-transform-runtime"
                            ]
                        }
                    }
                ],
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    }
}

处理 js 语法以及校验

const path = require('path')
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        enforce: 'pre' // previous post
                    }
                }
            }
        ]
    }
}

引入全局变量

const webpack = require('webpack')

module.exports = {
    // ...
    plugins: [
        new webpack.DefinePlugin({
            // 定义在编译阶段使用的变量；在浏览器运行阶段就只是值了
            "ENVIRONMENT": JSON.stringify("development")
        })
    ]
}

process.env.ENVIRONMENT ===> development

图片处理

  • 图片的分类
  1. css 里的background-image
  2. html 里的 标签
  3. js 里引入的img
const webpack = require('webpack')

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name:'assets/[name].[ext]',
                    }
                }
            },
            {
                test: /\.html$/,
                loader: 'html-withimg-loader'
            },
            {
                loader: 'url-loader',
                options: {
                   limit: 15000,
                   name: '[name].[ext]',
                },
            }
        ]
    }
}

打包文件分类

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    output: {
        // ...
        publicPath: ''  //  全局添加路径 公共路径
    },
    plugins: [
        ...
        new MiniCssExtractPlugin({
            filename: 'css/main.css'   // 加上css目录
        })
    ],
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1,
                        outputPath: 'img/',  // img文件夹下
                        publicPath: 'https://www.baidu.com'  // img 添加cdn加速 路径
                    }
                }
            },
        ]
    }
}

配置篇

打包多页应用

配置 source-map

watch 的用法

webpack 插件应用

webpack 跨域问题

resolve 属性常见配置

定义环境变量

区分不同环境

原理篇

tapable 的理解

手写 webpack

创建依赖关系

AST 递归解析

生成打包结果

手写 loader

手写 plugin

← 基础篇 →