webpack相关知识

小猫瘦瘦

已于 2022-09-28 09:00:46 修改

阅读量104

点赞数

分类专栏：前端 js webpack 文章标签： javascript 前端 webpack

于 2022-09-27 20:13:36 首次发布

本文链接：https://blog.csdn.net/qq_52499745/article/details/127065120

版权

js 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

前端

15 篇文章 1 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

1.webpack环境安装

npm install webpack webpack-cli -g//不指定版本,默认下载最新版本,全局安装以后直接使用
mkdir webpack //创建项目文件夹
cd webpack //进入项目文件夹
npm init -y //生成项目配置文件

创建一个webpack.config.js的打包配置文件

module.exports={
项目入口配置,
项目出口配置,
加载器配置,
插件配置,
开发模式配置,
其他
}

1.2 项目入口配置entry

1.2.1 单入口————(打包提交命令：webpack)

方法1：直接配置入口文件

// webpack配置文件
module.exports = {
    mode: "none",//开发模式
    entry: "./src/main.js",
}

方法2：使用基础目录拼接

// webpack配置文件
module.exports = {
    mode: "none",//开发模式
    context: __dirname + '/src',
    entry: "./main.js",//相对于context的路径
}

1.2.2 多入口

方法1：打包出来的文件名a.js和b.js与a:""和b:""一一对应

// webpack配置文件
module.exports = {
    mode: "none",//开发模式
    context: __dirname + '/src',
    entry: {
        a: './main.js',      //输出时默认为a.js
        b: './index.js',     //输出时默认为b.js
    }

}

方法2：输出hash值的文件名

// webpack配置文件
module.exports = {
    mode: "none",//开发模式
    context: __dirname + '/src',
    entry: {
        a: { import: "./main.js", filename: "page/[name][hash].js" } //filename:输出的文件路径 
    }
}

面试题:名字解释 bundle，chunk，module 是什么?

1、module：开发中的每一个文件都可以看作是 module，模块不局限于js，也包含css，图片等

2、chunk：表示代码块，一个 chunk 可以由多个模块组成

3、bundle：最终打包完成的文件，一般就是和 chunk 一一对应的关系，bundle就是对 chunk 进行编译压缩打包等处理后的产出

1.3 出口output

// webpack配置文件
module.exports = {
    mode: "none",//开发模式
    context: __dirname + '/src',
    entry: "./main.js", //context+entry=> webpack/src/main.js (入口路径地址)

    //  2.output:输出 
    output: {
        asyncChunks: true, //创建按需加载的异步 chunk。
        path: __dirname + "/dist1",//输出的目录,绝对路径,默认dist

        // filename: 输出的文件名   hash:加密
        filename: '[name]-666-[id]bundle[hash:5].js',

        // library: 'hqyj',//库名
        library: {
            name: 'MyLibrary', //库名
            type: 'var', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
        },

        // 注释模块 若导出时想要将注释一并打包，就添加这句
        auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)	  

        // 在生成文件之前清空不是本次产生的文件，打包文件夹下的目录里的文件
        clean: true,

        clean: {
            keep: /main.html/, // 保留 'dist2/main.html'的静态资源不删
        },
    }
}

1.4 加载器loader

1.4.1 文件加载器

下载插件 npm install css-loader style-loader --save-dev

 module: {
        rules: [
            //文件资源加载器  {test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
            // test:"当我遇到某个类型的文件的时候"，use:"启用我们对应的加载器"
            {
                test: /\.png$/, use: ["file-loader"]
            },
        ]
}