Webpack基础

最新推荐文章于 2023-05-19 20:23:38 发布

前端imber

最新推荐文章于 2023-05-19 20:23:38 发布

阅读量213

点赞数 1

分类专栏： webpack 文章标签： javascript webpack

本文链接：https://blog.csdn.net/imber___zsk/article/details/120146478

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Webpack

了解Webpack相关
- 什么是Wepack
  - 模块打包器（构建工具）
  - 前端所有资源文件都会作为模块处理
  - 根据模块的依赖关系进行静态分析、生成对应的静态资源
- 五个核心概念
  - Entry：入口、指示webpack应该使用哪个模块来作为构建内部依赖图的开始。
  - Output：输出、告诉webpack在哪儿输出bundles，以及命名，默认值为./dist。
  - Loader：loader能处理非JS文件（webpack自身只能解析JS(只能把ES6模块化翻译成ES5)、JSON）
  - Plugins：插件可以执行更多的任务，从打包和压缩，一直到重新定义环境变量中的变量，loader完不成的事它可以做。
  - Mode：模式，有生产模式production和开发模式development
- 理解Loader
  - Webpack本身只能加载JS/JSON模块，如果要加载其他类型的文件（模块），就需要使用对应的loader进行转换/加载。
  - Loader本身也是运行在node环境中的JS模块
  - 本身是一个函数，接受源文件作为参数，返回转换的结果
  - loader一把以xxx-loader方式命名
- 理解Plugins
  - 插件可以完成一些loader不能完成的功能
  - 插件的使用一般是在webpack的配置信息plgins选项中指定
- 配置文件（默认）
  - webpack.config.js：是一个node模块，返回一个json格式的配置信息对象
开启项目
- 初始化项目：npm init -y
- 安装webpack
  - npm install webpack webpack-cli -g//全局安装，作为指令使用
  - npm install webpack webpack-cli -D//本地安装，作为本地依赖使用
编译打包应用
- 创建文件
  - src/js/app.js
  - src/js/module1.js
  - src/js/module2.js
  - src/js/module3.js
  - src/json/data.json
  - src/index.html
- 运行指令
  - 开发配置指令：webpack ./src/js/app.js -o dist/app.js --mode=development、功能：webpack能打包js和json文件，并且能将es6模块化语法转换成浏览器能识别的语法
  - 生产配置指令：给mode为production、功能：在开发配置功能上加上一个压缩代码
- 结论：
  - webpack能够编译打包js和json文件
  - 能将es6模块化语法转换成浏览器能识别的语法
  - 注意统一暴露和分别暴露需要加{}
- 缺点：
  - 不能编译打包css、img等文件
  - 不能将js的es6基本语法转化为es5以下语法
- 改善：使用webpack配置文件解决、自定义功能

使用webpack配置文件

文件名称：webpack.config.js、执行只需要命令行输入webpack

文件内容：

const path = require('path'); //node内置、这个文件的代码都是commonjs、也可以解构出来resolve
module.exports = {
 entry: './src/js/index.js',//入口
    output: {//出口
        path: path.resolve(__dirname, 'dist'), //动态的绝对路径    
        filename: 'bundle.js'//输出文件名，不设置默认为main
    }，
    mode:'development'//选择production的时候会压缩
}

运行指令：webpack

打包less资源

概述：less文件webpack不能解析，需要loader编译解析
创建less文件
- src/less/test1.less
- src/less/test2.less
入口文件引入less（直接引入，不需要from）
安装loader
- npm install css-loader style-loader less-loader less -D

配置loader

const {
    resolve
} = require('path'); //node内置、这个模块也是基于node的
module.exports = {
    entry: './src/js/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    //所有的loader都要在module对象中的rules属性中rules
    //是一个数组，数组中的每一个对象就是一个loader
    //loader不需要引入
    module: {
        rules: [{
            test: /\.less$/i, //匹配所有的less文件夹
            use: [//字段用loader会报错，用use
                // compiles Less to CSS、简写方式、完整看官网
                'style-loader', //创建style标签，添加上js中的css代码
                'css-loader', //将css以commonjs方式整合到js文件夹中
                'less-loader', //使用lessloader，将less编译为css
            ],
        }, ],
    },
    mode: 'production',
}

运行指令：webpack

js语法检查

最新的webpack5没有eslint-loader

概述:对js基本语法错误/隐患，进行提前检查
安装loader(webpack5文档里已经没有这个loader了)
npm install eslint-loader eslint -D
备注：在eslint中文官网查看配置和规则

配置loader（rules的一个对象）

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        //options: {
          // eslint options (if necessary)
        //}
      }
    ]
  }
  // ...
 };

修改package.json(需要删除注释才能生效、参考vue配置不写在options里)

"eslintConfig":{
    "parserOptions": {
      "ecmaVersion":6,//支持es6
      "sourceType":"module"//使用es6模块化
    },
    "env":{//设置环境
      "browser":true,//支持浏览器环境：能够使用window上的全局变量
      "node":true//支持服务器环境:能够使用node上global的全局变量
    },
    "globals":{//声明使用的全局变量，这样即使没有定义也不会报错了
      "$":"readonly"///$只读变量
    },
    "rules":{//eslint检查的规则 0忽略 1警告 2错误
      "no-console":0,//不检查console
      "eqeqeq":2，//用==而不用===就报错
      "no-alert":2//不能使用alert
    },
    "extends":"eslint:recommended"//使用eslint推荐的默认规则
}

运行指令：webpack

js语法转换

概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容处理
安装loader
- npm install babel-loader @babel/core @babel/preset-env -D

{
    test: /\.m?js$/,
    //test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    },
}

运行指令：webpack

js兼容性处理

最新的bable已经删除polyfill

第一种方法：使用经典的polyfill

安装包
- npm install @babel/polyfill

使用

//入口文件
import '@babel/polyfill';//包含ES6的高级语法的转换，不管用了哪些新语法，全部的新语法都转换了

优点：解决babel只能转换部分低级语法问题，（如：let/const/解构赋值。。。），引入polyfill可以转换高级语法（如：Promise）
缺点：将所有高级语法都进行了转换，实际上可能只使用了一部分
解决：需要按需加载（使用了什么高级语法，就转换什么，而其他的不转换）

第二种方法：借助按需引入core-js按需引入

安装包

npm install core-js

配置loader

{
    // test: /\.m?js$/,
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        useBuiltIns: 'usage', //按需引入需要使用polyfill
                        corejs: {
                            version: 3//解决warning
                        },
                        targets: { //指定兼容性处理哪些浏览器
                            "chrome": '58',
                            "ie": "9"
                        }
                    }
                ]
            ],
            // cacheDirectory: true,//开启babel缓存
        }
    },
}

打包样式文件中的图片资源

最新的webpack5没有file-loader、没有url-loader

概述：图片文件webpack不能解析，需要借助loader编译解析
添加2张图片：一张小于8kb、一张大于8kb
通过背景图方式引入图片
安装loader
- npm install file-loader url-loader -D
- 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

配置loader

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
            limit:8192,//8kb-->8kb以下的图片会base64处理
            outputPath:'images',//决定文件本地输出路径
            publicPath:'../build/images'//决定图片的url路径
            name:'[hash:8].[ext]'//修改文件名称hash值取8位[ext]文件扩展名
        },
      },
    ],
},

运行指令：webpack

打包html文件
- 概述：html文件webpack不能解析，需要借助插件编译解析
- 注意不要在html中引入任何css和js文件
- 安装插件Plugins
  - npm install html-webpack-plugin -D
- 在webpack.config.js中引入插件（插件都要手动引入，而loader会自动加载）
  - const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
- 配置插件Plugins
```
plugins:[
    new HtmlWebpackPlugin({
		template:'./src/index.html',//以当前文件为模板创建新的HTML（1.结构和原来一样，2.会自动引入打包的资源）
    })
]
```
- 运行指令：webpack
打包html中图片资源
- 概述：html中的图片url-loader没法处理，它只能处理js中引入的图片/样式中图片，不能处理html中img标签，需要引入其他html-loader处理
- 安装loader
  - npm install html-loader -D
- 配置loader
```
{
    test: /\.html$/i,
    loader: "html-loader",
},
```
- 运行指令：webpack

打包其他资源

webpack5里面没有file-loader

如iconfont字体资源

配置loader

{
	test:/\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/,//处理其他资源
    loader:'file-loader',
	options:{
        outputPath:'media',
        name:'[hash:8].[ext]'
    }
}

运行指令：webpack

前端imber

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Webpack基础

Webpack了解Webpack相关什么是Wepack模块打包器（构建工具）前端所有资源文件都会作为模块处理根据模块的依赖关系进行静态分析、生成对应的静态资源五个核心概念Entry：入口、指示webpack应该使用哪个模块来作为构建内部依赖图的开始。Output：输出、告诉webpack在哪儿输出bundles，以及命名，默认值为./dist。Loader：loader能处理非JS文件（webpack自身只能解析JS(只能把ES6模块化翻译成ES5)、JSON）Plugin
复制链接

扫一扫