zhuanghaixin commented 3 years ago

Webpack初识

webpack是什么？

是一种构建工具，通过它可以用来转换ES6语法，转换JSX, CSS前缀补全/预处理器，代码压缩混淆，图片压缩

为什么学习webpack?

vue-cli 的底层实现原理，学习了它，可以更加方便的去使用 vue-cli vue-cli可以做什么？

可以运行为一个服务器
可以进行实时更新
可以解析 css 文件
等等。

怎么使用Webpack

你需要知道一些Webpack基础概念

webpack.config.js 可以通过webpack --config 指定配置的文件

配置的组成部分

安装webpack

创建空⽬目录和package.json

mkdir my-project
cd my-project
npm init -y

安装webpack 和webpack-cli

npm install webpack webpack-cli --save-dev

检查是否安装成功：

./node_modules/.bin/webpack -v

一个简单的例子

1.创建一个webpackconfig.js

'use strict'

const path = require('path')

module.exports ={
    entry:'./src/index.js', // 1.入口文件
    output:{  // 2.出口文件
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'production' // 3. 生产环境

}

2.创建src/helloworld.js和入口文件src/index.js

helloworld.js


export function helloWorld(){
    return 'hello webpack'
}

index.js

import {helloWorld} from "./helloworld";

document.write(helloWorld())

运行

 ./node_modules/.bin/webpack

创建dist/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

运行dist/index.html

这样就成功了

也可以通过npm run build运行构建

原理:模块局部安装会在node_modules/.bin目录创建软连接 package.json


{
"name": "my-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.11.0",
"webpack-cli": "^4.3.0"
}
}

zhuanghaixin commented 3 years ago

Webpack基础用法(一）

Webpack核心概念

entry 入口

单入口

module.exports = {
entry: './path/to/my/entry/file.js'
};

多入口

module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
};

output 出口⽤用来告诉webpack 如何将编译后的⽂文件输出到磁盘

单入口配置

module.exports = {
entry: './path/to/my/entry/file.js'
output: {
filename: 'bundle.js’,
path: __dirname + '/dist'
}
};

多入口配置通过给filename一个变量名 [name].[hash:5] 可以自定义
```
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
};
```
loaders

webpack 开箱即用只支持JS 和JSON 两种文件类型，通过Loaders 去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。本身是一个函数，接受源文件作为参数，返回转换的结果。换句话说，由于现在写的项目只有 js 文件，webpack 默认是可以打包 js 文件的。但是 webpack 默认仅仅只能打包 js 文件，无法打包其它文件（图片，样式，字体 ...）.如果想要打包其它的文件，可以借助 webpack 中的 loader 来进行打包。

常见的loaders
babel-loader :转换而生，es7等新特性语法
css-loader 支持.css文件等加载和解析
less-loader 将less转换为css
ts-loader 将ts转换为js
file-loader 进行图片、字体等的打包
raw-loader 将文件以字符串的形式导入

thread-loader 多进程打包js和css

如何使用loaders

const path = require('path');
module.exports = {
output: {
filename: 'bundle.js'
},
module: {
    rules: [
        {
            test: /\.txt$/, // test 指定的匹配规则
            use: 'raw-loader' // use使用指定的loader名称
        }
    ]
},
};

plugins

插件用于bundle文件的优化，资源管理和环境变量注入，作用于整个构建过程

常见的plugins

CommonsChunkPlugin:将chunks相同的模块代码提取成公共js
CleanWebpackPlugin:清理构建目录
mode

zhuanghaixin commented 3 years ago

Webpack基础用法(二）

解析es6和react jsx

解析css,less,sass

解析图片和字体

webpack的文件监听

webpack的热更新以及原理分析

文件指纹策略：chunkhash、contenthash和hash

html、css和javascript代码压缩

zhuanghaixin commented 3 years ago

zhuanghaixin / Interview

[webpack]如何使用webpack #109

Webpack初识

webpack是什么？

为什么学习webpack?

怎么使用Webpack

你需要知道一些Webpack基础概念

webpack.config.js 可以通过webpack --config 指定配置的文件

配置的组成部分

安装webpack

创建空⽬目录和package.json

安装webpack 和webpack-cli

一个简单的例子

1.创建一个webpackconfig.js

2.创建src/helloworld.js和入口文件src/index.js

运行

创建dist/index.html

运行dist/index.html

也可以通过npm run build运行构建

Webpack基础用法(一）

Webpack核心概念

entry 入口

output 出口⽤用来告诉webpack 如何将编译后的⽂文件输出到磁盘

loaders

常见的loaders

如何使用loaders

plugins

常见的plugins

mode

Webpack基础用法(二）

解析es6和react jsx

解析css,less,sass

解析图片和字体

webpack的文件监听

webpack的热更新以及原理分析

文件指纹策略：chunkhash、contenthash和hash

html、css和javascript代码压缩

Webpakc进阶用法

zhuanghaixin / Interview

[webpack]如何使用webpack #109

Webpack初识

webpack是什么？

为什么学习webpack?

怎么使用Webpack

你需要知道一些Webpack基础概念

webpack.config.js 可以通过webpack --config 指定配置的文件

配置的组成部分

安装webpack

创建空⽬目录和package.json

安装webpack 和webpack-cli

一个简单的例子

1.创建一个webpackconfig.js

2.创建src/helloworld.js和入口文件src/index.js

运行

创建dist/index.html

运行dist/index.html

也可以通过npm run build运行构建

Webpack基础用法(一）

Webpack核心概念

entry 入口

output 出口 ⽤用来告诉webpack 如何将编译后的⽂文件输出到磁盘

loaders

常见的loaders

如何使用loaders

plugins

常见的plugins

mode

Webpack基础用法(二）

解析es6和react jsx

解析css,less,sass

解析图片和字体

webpack的文件监听

webpack的热更新以及原理分析

文件指纹策略：chunkhash、contenthash和hash

html、css和javascript代码压缩

Webpakc进阶用法

output 出口⽤用来告诉webpack 如何将编译后的⽂文件输出到磁盘