webpack基本使用.md

卷 webpack
前端工程化
发布日期:   2021-05-10
文章字数:   3.2k
阅读时长:   15 分

1. webpack的简单使用

一般vue自带webpack，不用手动配置，该文档目的是认识webpack\

配套实例文件见同名文件夹

1.1 是什么

是一个模块化打包工具

1.2 作用

1.2.1 打包

开发中：如jquery.js，空格，回车，注释…
使用上线：jquery.min.，js空格，回车，注释 webpack==>没有

1.2.2 模块化

swiper.js jquery.js zepto.js ajax.js event.js 合并模块

1.3 整体流程

开发 ==》 打包:webpack ==》上线

1.4 安装

cnpm install webpack -g
cnpm install webpack-cli -g

注：cli就是脚手架的意思，建房子时用竹子搭建好架子就是脚手架。自己创建项目时要创建各种目录和环境，脚手架就是做这种东西。

1.5 简单使用webpack

webpack本身只能打包js，如果要打包:html、css…需要借助一些东西。使用如下：

1.进入项目目录，随便创建一个js文件 src/index.js

2.在该目录中下载webpack cnpm install webpack -S

3.在项目执行webpack命令

1.6 webpack的web服务

因为有时候项目不是在根目录，所以不用liveServer
下载

cnpm webpack-dev-server@3

配置webpack.config.js

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        path: __dirname + "/public",
        filename: "./js/[name].js"
    },
    devServer: {
        contentBase: "./public",
        inline: true
    }
}

package.json

{
  "name": "snabbdom",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "snabbdom": "^3.5.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  }
}

然后就可以使用命令 npm run start启动了

1.6 webpac-server

2. webpack的入口和输出

2.1 安装脚手架webpack-cli

这里需要webpack和webpack-cli配合
cnpm install webpack-cli -S

这样才能使用一些模块如require(‘path’);

2.2 创建配置文件

手动创建webpack.config.js

2.3 配置入口出口

官网说明
https://webpack.docschina.org/concepts/#output

模板字符串
https://webpack.docschina.org/configuration/output/#template-strings

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
};

3. 入口的多种配置

// 1. String ：单入口， 打包成一个chunk,输出一个bundle文件，chunk的名称为默认。
        entry:'./src/index.js',
 // 2. Array ： 多入口， 写多个入口，所有入口文件形成一个chunk(名称默认), 输出只有一个bundle, chunk名称默认
        entry: ["./src/two.js",'./src/index.js'],
// 3. Object: 多入口， 有几个入口文件就生成几个chunk， 并输出几个bundle文件， chunk的名称是key
        entry: {
           two: "./src/two.js",
            index:'./src/index.js'
        },
		output:{
			filename: “[name].js”,
			path: resolve(__dirname, “build”)
		}

3.1 多文件打包成一个文件

问题：多个入口文件 ==》 单文件出口

解决：entry改成数组形式

const path = require('path');

module.exports = {
    entry: ['./src/main.js', './src/main.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[hash].js',
    },
};

3.2 多文件打包成多文件

问题：多个入口文件 ==》 多文件出口

解决：将filename属性删去，entry改为属性

const path = require('path');

module.exports = {
    entry: { a: './src/main1.js', b: './src/main.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
};

4. loader

4.1 loader概念

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。

loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

4.2 loader的使用

4.2.1 安装webpack-cli、webpack

cnpm i -S webpack webpack-cli

4.2.2 安装loader

cnpm i -S style-loader css-loader

4.2.3 将css文件import 到 js

在js文件里import css 文件，当然实际项目的时候css和js是分开，且不需要自己下载和配置loader，

main1.js

import './style.css';


像vue、react都有loader

4.2.4 配置webpack.config.js

在更高层面，在 webpack 的配置中，loader 有两个属性：

test 属性，识别出哪些文件会被转换。

use 属性，定义出在进行转换时，应该使用哪个 loader。

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'production',
    entry: { a: './src/main1.js', b: './src/main.js' },
    module: {
        rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
    },
};

4.2.5 webpack命令打包

4.2.6 常见loader

包括不限于

1、file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件。
2、url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去。
3、source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试。
4、image-loader：下载并且压缩图⽚⽂件。
5、babel-loader：将ES6转化为ES5。
6、css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性。
7、style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。
8、eslint-loader:通过 ESLint 检查 JavaScript 代码。
9、ts-loader：ts转js
10、html-withimg-loader：让html支持图片的loader

5 plugin

loader用于转换某些类型的模块，而插件（plugin）则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

5.1 html-webpack-plugin的使用

plugin以html-webpack-plugin为例子
https://www.cnblogs.com/wonyun/p/6030090.html
\

5.1.1 下载


cnpm i html-webpack-plugin -S
\

5.1.2 引入


const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
\

5.1.3 配置

\

plugins: [
 new HtmlWebpackPlugin({
     template: './src/index.html'
     })
 ],

5.1.4 参数说明

  1. 指定模板页面
    (只有这样才会保留该文件的html结构)

    template:'./src/index.html'

  2. 修改默认输出文件名
    (默认index.html，多文件时必须修改)

    filename:'xx.html';

  3. 允许插入到模板的一些chunk(chunk是根据一个入口产生的module集合)

    chunks：['jqeury','xx']

  4. 配置不允许注入的chunk

    excludeChunks:['xx']

  5. 多页面打包

需要创建多个new htm-webpack-plugin
或者循环

plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
        excludeChunks: ['a']
    }),
    new HtmlWebpackPlugin({
        template: './src/detail.html',
        filename: 'detail.html',
        excludeChunks: ['b']
    }),
],

5.1.4 配置一览

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

module.exports = {
    mode: 'production',
    entry: { a: './src/main.js', b: './src/main.js' },
    module: {
        rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            excludeChunks: ['a']
        }),
        new HtmlWebpackPlugin({
            template: './src/detail.html',
            filename: 'detail.html',
            excludeChunks: ['b']
        }),
    ],
};

6. webpack图片支持

先下载两个loader：

cnpm i file-loader html-withimg-loader

6.1 使用file-loader

配置文件

{ test: /\.(png|jpg|jpeg|gif)$/, 
use: [{
    loader:'file-loader',
    options:{
        esModule:false,
        outputPath:'img/'
    }
}]},

6.2 使用html-withimg-loader

{
    test: /\.html$/,
    use: 'html-withimg-loader'
}

6.3 总体配置

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

module.exports = {
    mode: 'production',
    entry: { a: './src/main.js', b: './src/main.js' },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        esModule: false,
                        outputPath: 'img/'
                    }
                }]
            },
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            excludeChunks: ['a']
        }),
        new HtmlWebpackPlugin({
            template: './src/detail.html',
            filename: 'detail.html',
            excludeChunks: ['b']
        }),
    ],
};

7. 字体使用

7.1 发现iconfont不能使用在线链接了，将iconfont下载到本地

7.2 css里修改font图标的地址

7.3 用entry的js引用css

import './css/iconfont.css';

7.4 在html插入Unicode方式的图标

实测不行，反而不用loader可以，这里仅做过程记录

{
    test: /\.(woff2|woff|ttf)$/,
    use: 'file-loader?name=./fonts/[name].[ext]',
},

7.5 webpack

8. css的正确使用，分离&压缩

8.1 分离css

将一个页面的css放到js中，并配置entry

8.1.1 下载插件mini-css-extract-plugin

cnpm i mini-css-extract-plugin

8.1.2 引入plugin

const miniCssExtractPlugin = require('mini-css-extract-plugin');

8.1.3 配置mini-css-extract-plugin

module->rules->

要删除style-css

{ test: /\.css$/, use: [miniCssExtractPlugin.loader, 'css-loader'] },

plugin->

new miniCssExtractPlugin({
        filename: './css/[name].css'
    }),

8.2 压缩css

css需要单独下载插件，而js原本就被webpack支持

8.2.1 下载optimize-css-assets-webpack-plugin

cnpm i optimize-css-assets-webpack-plugin

8.2.2 引入插件

const optimizeCss = require('optimize-css-assets-webpack-plugin');

8.2.3 配置使用

plugin->

new optimizeCss({

})

8.3 webpack打包

8.4 总体配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCss = require('optimize-css-assets-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: { a: './src/main.js', b: './src/main1.js' },
    module: {
        rules: [
            { test: /\.css$/, use: [miniCssExtractPlugin.loader, 'css-loader'] },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        esModule: false,
                        outputPath: 'img/'
                    }
                }]
            },

            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            excludeChunks: ['a']
        }),
        new HtmlWebpackPlugin({
            template: './src/detail.html',
            filename: 'detail.html',
            excludeChunks: ['b']
        }),
        new miniCssExtractPlugin({
            filename: './css/[name].css'
        }),
        new optimizeCss()
    ],
};

9. 项目打包

9.1 引用配置

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCss = require('optimize-css-assets-webpack-plugin');


module.exports = {
    //对应生产模式
    mode: 'production',
    //打包入口，索引是chunk名,为文件加载是左到右
    entry: { jquery: './src/js/jquery.js', common: './src/js/common.js', index: './src/index.js', },
    //配置出口
    output: {
        path: path.resolve(__dirname, 'dist/')
    },
    //module配置
    module: {
        rules: [
            { test: /\.css$/, use: [miniCssExtractPlugin.loader, 'css-loader'] },
            //配置图片打包loader
            {
                test: /\.(png|jpg|svg|gif|jpeg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        esModule: false,
                        outputPath: 'img/'
                    }
                }]
            },
            //配置字体打包,需要webpack5+
            {
                //转换文件格式
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                //文件打包方式
                type: "asset/resource",
                generator: {
                    filename: `./fonts/[contenthash][ext]`
                }
            },
            //配置html文档的图片支持
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            }
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
        //配置插件对象
        new HtmlWebpackPlugin({
            template: './src/index.html',
            chunks: ['jquery', 'common', 'index']
        }),
        new HtmlWebpackPlugin({
            template: './src/detail.html',
            filename: 'detail.html',
            chunks: []
        }),
        //css抽离
        new miniCssExtractPlugin({
            filename: './css/[name].css'
        }),
        //压缩
        new optimizeCss()
    ],
};

9.2 配置jQuery

jQuery打包后无法使用，jquery是自执行函数，再打包后就是模块又模块，自然全局就没$符号
\

  1. 引入webpack

    const webpack = require('webpack')

  2. 安装jquery

    cnpm i jquery -S

  3. 配置

    new webpack.providePlugin({
    $:'jquery',
    jQuery:'jquery',
    'window.jQuery':'jquery',
})

9.3 打包页面css与内部js

  1. 为每个页面创建一个js文件，将css文件与内部js添加到里面，并删除在页面删除css与js的引用
    import 'xxx.css';

//...javascript代码
  2. 将这个js文件添加到entry
    entry: { 'js/main': './src/main.js' },
  3. 为HtmlWebpackPlugin
    对象的plugin配置这个chunk

9.4 打包js文件

  1. 将所有外部js文件配置entry,页面加载顺序以entry左到右加载
    entry: { 'js/main': './src/main.js' },
  2. 在html的html-plugin配置需要的chunk

9.5 webpack

10. 参考：

10.1 官方文档

https://webpack.docschina.org/concepts/

10.2 对Chunk的理解

https://blog.csdn.net/glenshappy/article/details/119642331
/
Chunk是Webpack打包过程中，一堆module的集合。/
我们知道Webpack的打包是从一个入口文件开始，也可以说是入口模块，入口模块引用这其他模块，模块再引用模块。/
Webpack通过引用关系逐个打包模块，这些module就形成了一个Chunk。

10.3 loader和plugin的区别

webpack出厂自身只能识别js和json，loader是将webpack不能识别的模块转换成webpack能识别的模块
而plugin插件会为webpack添加更强大的功能,同时也能和loader搭配，如miniCssExtractPlugin.loader

10.4 webpack5与iconfont打包

现在我们可以采用webpack5的方式使用资源类型模块，下面这个asset/resource就相当于file-loader：
https://blog.csdn.net/qq_49900295/article/details/124550743

10.5 webpack中的的坑

webpack会对html进行页面优化，忽略它认为不重要的属性，这可能产生bug
如将input中的属性[type=text]删除，导致无法使用[type=text]属性选择器操作

文章作者: iamfugui
文章链接: https://iamfugui.github.io/2021/05/10/note/qian-duan-gong-cheng-hua-webpack-ji-ben-shi-yong/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 iamfugui !
卷 webpack
赏
评论
  目录