webpack

Webpack

作用域问题:

立即执行函数 : var result = (function(){})()

如何实现代码的拆分 :

// 第一个文件夹
//写入方法
module.exports = {}  //暴露..
// 第二个文件夹
require()//引入第一个文件夹的自定义模块

如何让浏览器支持模块:

//方法模块
define([依赖的模块],function() {
	//暴露的接口
})
// 要引入的文件   main.js
require([引入上面的方法模块],function(参数是上面方法模块的方法名) {
    
})
//在HTML文件中,引入第三方文件require.js data-main属性提供了一个入口,写入第二个文件的地址]()

==============================================

//安装(本地 webpack)
npm install webpack webpack-cli
function helloword() {
    
}
export default helloworld       //模块导出
import helloword form "./url"   //模块导入
//pwd  绝对路径
//最后在终端上 npx webpack    会出现一个main.js 文件

webpack --stats detailed 查看打包详情

自定义模块

通过配置文件自定义模块

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WFcs254i-1647736768399)(C:\Users\Lenovo\Desktop\typora\img\config.png)]

//通过配置文件自定义模块

//1. 创建 webpack.config.js 文件
//2. 引入 path 模块
const path = require('path')
//3. 
module.exports = {
		//配置入口
    entry: './src/index.js' ,

    output: {
    //指定输出文件的文件名
        filename : 'bundle.js' ,
    //指定文件的输出路径
        path: path.resolve(__dirname, './dist')
    } ,
        
    mode: 'none'
}
//4. html文件里  引入bundle.js文件
//5. 终端:
//       npx webpack       dist文件都是通过 config文件配置而成的

自动引入资源

如何使用 HtmlWebpackPlugin

实现自动生成 HTML 入口文件和引入功能

//1. 安装 
npm install html-webpack-plugin
//2. 自定义一个模块
//在  config 文件里添加如下代码 
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 plugins: [
        //第一个插件
        new HtmlWebpackPlugin({
            //模板
            Template: './index.html',
            //输出的文件的文件名
            filename: 'app.html',
            //标签的位置
            inject: 'body'
        })

    ]
//3. npx webpack
//4. dist 文件里会出现一个app.html

//清理 dist
//output 中添加
clean: true

如何使用 webpack-dev-server

//创建文件夹
//2. config 文件
mode: 'development'
//3. 使用 source-map 
//4. 终端 npx webpack --watch  实现自动编译
//5. 安装 webpack-dev-server 插件  实现自动更新无需是手动刷新 
devServer: {
    static: './dist'
}
6. npx webpack-dev-server  点Loopback后的网址

资源模块

Resouce 资源

发送一个单独的文件,并导出 URL

  //在config文件中
module: {
        //规则
        rules: [
            {
                // 加载的文件类型
                test: /\.png$/, // $ 表示以png作为扩展名的文件
                //资源类型
                type: 'asset/resource',
                //自定义图片的名称与存放路径
                generator: {
                     //    文件夹  根据文件内容生成哈希字符串   扩展名 
                    filename: 'images/[contenthash][ext]'
                }
            }
        ]
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZDzR4ai-1647736768401)(C:\Users\Lenovo\Desktop\typora\img\resource.png)]

inline 资源

source 资源

用于导出资源的源代码

通用资源类型

在导出一个 data URL 和发送一个单独的文件之间自动选择

默认情况下,当文件大小小于8k时,只会生成一个链接

loader

loader

style-loader 加载css

less

less-loader 引入css预处理工具

mini-css-extract-plugin -D 抽离 压缩 C

SS

csv-loader,xml-loader 加载数据

data.xml 会转化为一个对象

data.csv 会转换为一个数组

babel-loader

npm install babel-loader @babel/core @babel/preset-env -D

@babel/runtime

@babel/plugin-transform-runtime

代码分离

多入口

防止重复

动态导入

懒加载

缓存

配置输出文件的文件名

改变filename值

缓存第三方库

将js 文件放到一个文件夹中

公共路径

开发环境

npx webpack --env production

npx webpack --env production --env goal=local env.goal

terser-webpack-plugin 压缩插件

npm脚本配置

"scripts": {
    "start": "webpack serve -c ./config/webpack.config.dev.js",
    "build": "webpack -c ./config/webpack.config.prod.js"
  }

合并配置文件

npm install webpack-merge -D

公共路径 环境变量 拆分环境变量 npm脚本 提取公共配置 合并配置文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DXrGXbs6-1647736768401)(C:\Users\Lenovo\Desktop\typora\img\source-map.png)]

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D

devServer

没学好

模块热替换与热加载

module.hot在config文件的devserver 中 设置的值为 true

if(module.hot) {
    //当 ./input.js 发生变化时,accept() 函数执行
    module.hot.accept('./input.js', () => {

    })

Eslint

安装插件,帮助查找问题

npx eslint ./src

        //手工关闭覆盖层
        client: {
            overlay: false,
        }
   //检查错误的配置
            {
                test: /\.js$/,
                use: ['babel-loader', 'exlint-loader'],
            }

2.1.5