webpack基础入门复习笔记(下)

最新推荐文章于 2024-07-21 06:18:33 发布

洛.rar

最新推荐文章于 2024-07-21 06:18:33 发布

阅读量258

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_51606563/article/details/126573931

版权

1.3webpack中的插件

插件的作用

通过配置安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个插件：

webpack-dev-server：webpack会自动进行项目的打包和构建

npm install webpack-dev-server@3.11.2 -D
npm install webpack-cli --save-dev

配置插件

配置插件后的index.html

    <!-- 安装插件以后这一步就不需要了 -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- 安装插件以后需要访问内存里的的main.js -->
    <script src="/main.js"></script>

并且注意不能使用alt+b 的方式访问而是点击这个，在点击到src目录下。

html-webpack-plugin

webpack中的HTML插件

 npm install html-webpack-plugin@5.3.2 -D

可以通过这个插件自定制index.html文件的内容。

使用这个插件需要对webpack.config.js文件进行增加

//导入插件 html-webpack-pulgin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')

//2,new 构造函数，创建插件的实例对象。上面大写的是构造函数下面小写的是实例对象。
const htmlPlugin = new HtmlPlugin({
    //指定要复制那个页面
    template: './src/index.html',
    //指定生成文件存放目录
    filename: './index.html'
})

//使用node.js中的导出语法，向外导出一个webpack的配置文件
module.exports = {
    //代表webpack运行的模式，可选值有两个development和production
    mode: 'development',
    //插件的数组，将来webpack在运行时会加载和调用这些插件
    plugins: [htmlPlugin],
    devServer: {
        open: true
            //port:80 这个是修改端口号用的 在http协议中，如果端口号是80则显示的时候会被省略
            //host:'127.0.0.1'  指定运行的地址
    }
}

使用了这脚本以后不需要html中这一句也不需要了<script src="/main.js"></script>
devServer 这个的作用是当我们打包以后就自动弹出页面。

1.4webpack中的Loader

1，loader的概述

在实际开发中，webpack默认只能打包处理以.JS后缀名的模块。其他非.js的模块webPack默认处理不了，需要调用loader加载器才能正常打包。，否则会报错。

2，打包处理css文件

运行先安装

npm i style-loader@3.0.0 css-loader@5.2.6 -D

在webpack.config.js的modile ->reles 数组中，添加loader规则如下。

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

其中，test表示匹配文件类型，use表示对要调用的loader
注意：
- use数组中指定的loader顺序是固定的
- 多个loader的调用顺序是：从后往前调用。

3，打包处理less文件

安装命令
```
 npm i less-loader@10.0.1 less@4.1.1 -D
```

配置

 module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

4.打包处理样式中与url路径相关的文件

安装指令

npm i url-loader@4.1.1 file-loader@6.2.0 -D

html中的内容
```
    <img src="" alt="" class="box">
```
js中的内容注意这些语句不能出错，出错就会报错，找不到图片
```
import logo from './assets/images/logo.png'
$('.box').attr('src', logo)
```

webpackconfig.js

   module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //这里的limit是限制图片大大小，大于这个值的不会被转成base64
            { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' }
        ]
    }

5，babel-loader相关的包当遇到webpack无法识别的高级语法时，需要导入这个包。

index

function info(targrt) {
    targrt.info = "hhh"
}
@info
class Persin {}

console.log(Persin.info)

运行命令如下

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-proposal-decorators

webpack

 module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.jpg|png|gif$/, use: 'url-loader' },
            //注意：必须使用exclude 指定排除项：因为 node_modules 目录下的第三方包不需要打包。
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    }

babel.config.js

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-proposal-class-properties"
  ]
}

1.5sourceMap

发布的时候要关闭这个，为了安全。

这个命令的作用是将页面的报错信息行号与自己写的代码行号对应。

在webpack.config.js文件中添加这个代码

module.exports = {
    devtool: 'eval-source-map',
    。。。。
    }

为安全考虑我们发布时候可以使用这个。

1.7webpack中的@

为了使用这个需要对@进行配置