webpack学习笔记（上）

webpack学习笔记

好好学习 天天向上！遇到bug，不要慌！

大一统的模块化规范–ES6模块化

1.node.js中通过babel体验ES6模块化

1. 打开终端，输入命令：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

2. 安装完毕之后，输入命令安装：

npm install --save @babel/polyfill

3. 项目根目录创建babel.config.js文件，内部代码如下

const presets = [
    ["@babel/env",{
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]
//暴露
module.exports = { presets }

4. 创建一个测试文件（随便打印点东西就行）

//创建了index.js文件
console.log('ok');

5. 在终端执行命令

npx babel-node ./index.js

2.ES6模块化基本语法

设置默认导入和导出

默认导出语法：

export default {
    成员A,
    成员B,
    ...
}

使用方法

let num = 10;
let cnt = 2;
export default {
    num
}//只暴露num

默认导入语法

注意：接收名称是自己定的，在当前文件中使用的名称

// import 接收名称 from "模块标识符"
import index from './index.js'
console.log(index);// { num: 10 }

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，不能写多个export default，否则会==报错==

小tip：

1. 如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象
2. 在导出的函数中能够读取到没有被导出的值

//index.js文件
let num = 10;
let cnt = 2;
function showCnt() {
    console.log(cnt);
}
export default {
    num,
    showCnt,
}//这里的cnt并没有被导出

//m1.js文件
import index from './index.js'
index.showCnt();// 2

按需导入导出

按需导出语法

export let age = 998;
export let name = 'ljc'

按需导入语法

import {age, name} from './m2.js'
console.log(name + age);// ljc19

导出名需要和属性名相对应，可以通过as来设置别名，例如：

import {age ,name as nickname} from './m2.js'
console.log(nickname + age);//ljc19

这样就实现了设置别名，设置别名后原先的名字就不能用了

默认和按需两种方法共存

//m2.js文件 导出
export let age = 19;
export let name = 'ljc'
let sex = '男'
export default {
    sex
}
//m1.js文件 导入
import m2, {age, name as nickname} from './m2.js'
console.log(m2);// { sex: '男' }
console.log(nickname + age); //ljc19

注意：一个模块中既可以按需导入导出也可以默认导入导出

直接导入并执行代码

 import "./m2.js";

直接执行，不接收模块中暴露成员

webpack正文

webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

从实战中学习更加有意义，之前看了很多个讲师的视频，有点枯燥无厘头了，听完了完全不知道学到了什么

创建列表隔行变色项目

1. 创建项目目录并初始化

终端运行npm init -y命令，作用是初始化包管理器配置文件package.json

项目目录

src --> index.html //新建src文件夹下创建index文件

2. 创建首页及js文件

写一下隔行变色项目的结构，然后在src目录下创建index.js文件

3. 安装jQuery

终端输入命令npm install jquery -S

注意：这里是jquery==不是==jQuery

4. 导入jQuery

import $ from "jquery";
$(function(){
    $('li:odd').css('backgroundColor','pink');
    $('li:even').css('backgroundColor','blue')
})

此时项目运行会报错，原先是第一行的代码属于ES6语法，浏览器存在兼容性问题

因此我们通过webpack将代码转化为浏览器能够兼容的代码

webpack基本使用

这部分学了n遍了，所以笔记有点预知未来的感觉，希望这次能有好结果

安装和配置webpack文件

1. 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包

2. 在根目录下创建webpack.config.js文件，在执行webpack时会优先从用户自定义的配置文件中调用

3. 在配置文件中写以下代码，

注意：mode的意思是文件导出格式，有生产模式和开发模式，生产模式的代码会进行压缩，去掉所有空格之类的，代码文件小，但是不利于我们的学习，因此在学习的时候还是设置为开发模式

这个配置文件在后面的学习中还会添加大量的内容

module.exports = {
  mode:"development"//可以设置为development(开发模式)，production(发布模式)
}

4. 修改package.json文件，添加一点东西

//未添加
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
}
//添加后
"scripts":{
	"test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
}

script对象下的配置属性，可以通过 npm run 运行

例如：npm run dev，运行dev启动webpack服务进行项目打包

如果这里==报错==

1. 请检查两个index文件是否存在于src目录下
2. 可能是安装jquery的时候打了大写的Q

在执行完命令后，我们会发现项目目录下多了个dist文件夹，这个文件夹存放的是通过webpack打包后的文件，也就是我们这个项目中转为为浏览器兼容的代码，因此我们将这个文件引入我们的index.html文件即可。

通俗点说就是，这个是转化好的文件，实现的效果和我们先前写的一样，但是这个文件实现了兼容，所以我们引用的时候，引用这个文件就好

配置webpack的打包入口和出口

默认会将src/index.js 作为默认的打包入口js文件，默认会将dist/main.js 作为默认的打包输出js文件

我们可以通过配置之前所创建的配置文件(webpack.config.js)来自定义出入口文件

const path = require('path');//导入node.js中操作路径的模块
module.exports = {
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径，绝对路径
    //配置出口文件
    output:{
        path:path.join(__dirname,"./dist"),//设置路径
        filename:"res.js"//设置导出文件名称
    },
    //模式选择
    mode: "development"
}

在上面的代码中我们引用了node中的path模块，path.join()用于连接路径，会正确地使用当前系统的路径分隔符，也就是绝对路径

注意：在上面代码中的出入口文件路径，需要根据自己的文件目录来写，cv大概率报错噢

设置webpack自动打包

我们每次修改代码都要重新打包，太麻烦了，因此需要自动打包

1. 安装自动打包工具

npm install webpack-dev-server -D

2. 修改package.json文件中的dev指令，也就是我们自己先前添加的那个属性（4.x版本）

//修改前
"dev": "webpack"
//修改后
"dev": "webpack-dev-server"

注意：如果使用的webpack版本是5.x的，则需要将上面的配置文件修改为"dev": "webpack server"，否则报错。或者使用==npx webpack serve==运行

webpack版本可以通过终端命令webpack -v查看

3. 运行npm run dev，进行打包
4. 在运行结果中，有相关的信息

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /

第一行是服务器的地址，我们可以访问这个地址来运行我们的网页

第二行是文件的输出路径为/，这个意思是存放到了服务器的根目录中

注意：webpack server自动打包的输出文件，默认放到了服务器的根目录中

这些地址文件目录，我们都可以通过配置文件来更改

5. 记得要将js文件引入页面中，通过第4步知道，文件存放于服务器的根目录中，因此

<script src="/bundle.js"></script>

• webpack server 会启动一个实时打包的http服务器
• 输出文件放在了服务器中，在项目目录中看不见，不太友好

配置html-webpack-plugin

利用这个插件生成一个预览页面，解决我们在访问8080时，直接看到的不是页面的问题

1. 安装包html-webpack-plugin

npm install html-webpack-plugin -D

2. 修改配置文件

引入下载好的包，配置相应文件

//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件
    template:"./src/index.html",
    //设置生成的预览页面名称
    filename:"index.html"
})

在这个对象中，新增plugins属性，把实例化好的对象放进去

注意：plugins有==s==

module.exports = {
    ...
    plugins:[ htmlPlugin ]
}

在很多视频中都是先把这个配置文件的大体写出来的，这个视频不是，有点不习惯