【webpack】webpack探索

webpack是什么

构建工具

初始化

pnpm init -y

生成一个package.json文件

为什么使用webpack

• 很难直观的去感受到你的某个文件依赖了哪些外部车或者其他组件
• 如果一个依赖没有加上或者说顺序故错了，整个项目可能都步起来
• 如果一个依赖已经装了但是没有用。试览器会产生额外的开销去下骤不必要的代码

打包分析

配置文件

module.exports = {
  mode: '',
  entry: {
    // ...
  },
  module: {
    rules: [
      // ...
    ]
  },
  plugins: [],
  devServe: {},
  resolve: {
    extensions:['.ts', '.js', '.cjs', '.json'] //配置文件引入时省略后缀名
  },
}

entry(入口)

字符串形式

module.exports = {
    entry: './index.ts'
}

数组形式(多个入口)

module.exports = {
    entry: ['./index.ts','./a.ts']
}

对象形式

module.exports = {
    entry: {
        main: {
            filename: 'taget.js', //输入文件名
            import: './index.ts', //指定入口文件
            runtime: 'mainRuntime', //指定一个运行时环境,如果不存在就创建这个运行时环境
            // dependOn: 'mainRuntime', //指定一个运行时环境,如果不存在也不会创建这个运行时环境,不能与runtime同事存在
        },
        // 多个入口
        test: {
            filename: 'target.js', //输入文件名
            import: './index.ts', //指定入口文件
        }
    },
    output: {
        clean: true, //每次打包前清楚dist目录
    }
}

出口(output)

module.exports = {
    entry: {
        main: {
            filename: 'target.js', //输入文件名
            import: './index.ts', //指定入口文件
            runtime: 'mainRuntime', //指定一个运行时环境,如果不存在就创建这个运行时环境
            // dependOn: 'mainRuntime', //指定一个运行时环境,如果不存在也不会创建这个运行时环境,不能与runtime同事存在
        },
        //多入口
        test: './a.ts',
    },
    output: {
        clean: true, //每次打包前清除打包输出目录
        path: path.resolve(__dirname, 'app'), //指定输出目录名字
        filename: '[name].[contenthash:5].js', //指定输出文件名,name表示入口指定的文件名,不指定默认输入为入口时指定的文件名,hash表示给文件名加上一个hash
    }
}

深入理解devDependencies和dependencies

devDependencies(生成依赖)

dependencies(开发依赖)

loaders

我们之间在js中引入css文件是原生js所接受的吗?
答案是不可以的,我们js中引入css文件,完全是构建工具(webpack)loaders的功劳。

loaders 处理css

• 安装css-loader&style-loader

pnpm i css-loader style-loader -D

• 配置文件中处理

const path = require('path')
/**@type {import('webpack'.Configuration)} */
module.exports = {
    entry: './index.ts',
    module: {
        rules: [
            // css loader
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                    // sass处理
                    // { loader: 'sass-loader' },
                ],
            },
        ],
    },
}

loaders 处理less

• 安装css-loader&style-loader&less&less-loader

pnpm i less less-loader -D

• 配置文件中处理

const path = require('path')
/**@type {import('webpack'.Configuration)} */
module.exports = {
    entry: './index.ts',
    module: {
        rules: [
            // css loader
            {
                test: [/\.css$/, /\.less$/],
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                    // less处理
                    { loader: 'less-loader' },
                ],
            },
        ],
    },
}

webpack 处理ts

• 安装typescript&ts-loader

pnpm i typescript ts-loader -D

• 配置文件中处理

const path = require('path')
/**@type {import('webpack'.Configuration)} */
module.exports = {
    entry: './index.ts',
    resolve: {
        extensions:['.ts', '.js', '.cjs', '.json'] //配置文件引入时省略后缀名
    },
    module: {
        rules: [
            // css loader
            {
                test:  /\.ts/,
                use: [
                    // ts-loader
                    { loader: 'ts-loader' },
                ],
            },
        ],
    },
}

插件