webpack 使用记录--累
Webpack： 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
为了简化开发的复杂度，前端社区涌现出了很多好的实践方法：模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；Scss，less等CSS预处理器
因此，Webpack就是可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用.
webpack
webpack概念
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
打包工具
- JavaScript 模块打包之后就可以运行在浏览器
能做什么
- webpack 可以当作是一个模块打包平台，但是它本身只能打包 JavaScript 模块
- 对于其它的文件模块资源，则需要使用第三方 loader 来处理
- JavaScript 资源打包
- css 打包
- 图片 打包
- less
- sass
- babel EcmaScript 6 转 EcmaScript 5
- 开发工具：http 服务器
- 代码改变，自动刷新浏览器
- 压缩代码
- JavaScript 代码压缩
- html 代码压缩
- css 代码压缩
核心概念
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility
其它打包工具
相关资源链接
- webpack 官网
- webpack 1.x
- webpack 2 之后
- 最新版本是 4.x
- 官方教程
- Github 仓库
- 常用 Loaders 列表
- 常用 Plugins 列表
配置webpack第三方包
通常情况下我们不打包第三方包，因为第三方包太大，和 bundle 打包到一起会造成资源体积过大，所以我们还是通过 script 标签的方式把第三方资源引入到页面中，只需要通过以下配置即可，这里以 jQuery 为例
- 下载第三方包
npm i jquery
- 在页面中引入资源
<script src="node_modules/jquery/dist/jquery.js"></script>
- 配置
externals: {
// key 是第三方包名称，value 是全局中的 jQuery 对象
// 这里配置的含义就是：当你在代码中 import jquery 的时候，不会把 jquery 打包到 bundle 中，而是使用我指定的全局中的 jQuery 对象
jquery: 'jQuery'
}
- 加载使用
import $ from 'jquery'
$('#app', {
width: 200,
height: 200,
backgroundColor: 'pink'
})
- 打包测试
npm run build
webpack 基础
javascript 模块化
整个web的发展越来越快，涉及到的东西以及要处理的越来越多，于是我们的JS代码就越来越大，自然越来越混乱，就容易出错。因此，我们把代码阉割了。嗯，没错，就是我们把这个大西瓜切成很多块，所以每个程序员都可以自己选择一块，然后吃一块，不再是一个大西瓜一人吃一口了
- Node.js（服务端）
- AMD 模块规范（用于浏览器）
- <span style="color:#fd7275"> require.js 库 </span>
- CMD 模块规范（用于浏览器）
- <span style="color:#fd7275"> sea.js 库 </span>
- ECMAScript 6 模块规范
webpack 模拟
准备
- 创建
webpack-demos学习目录 - 创建
webpack-demos/src目录 - 在
src目录中分别创建以下两个文件
import example from './example'
example()
export default function () {
console.log('Hello webpack!')
}
- 创建 webpack-demos/index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello webpack!</h1>
<!-- 浏览器无法直接运行模块源码 -->
<!-- <script src="src/index.js"></script> -->
</body>
</html>
webpack 打包
- 创建package.json文件
npm init
npm init -y
形成 package.json 文件
Wrote to c:\Users\lenovo\Desktop\webpack-dome\package.json:
{
"name": "webpack-dome",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2 安装依赖
npm i -D webpack webpack-cli
3 打包命令
npx webpack
包的调用的方式：
① 引用API ② 命令的方式使用
npx 会找到项目中安装的 webpack 或者全局的 webpack。
4 webpack 运行过程
- 默认找到 src/index.js
- 分析 src/index.js 所有的依赖
- 然后将打包结果输出到 dist/mian.js 中
使用配置文件
创建webpack.config.js文件
const path = require('path')
module.exports = {
entry: './src/index.js', // 打包的入口
output: {
path: path.join(__dirname, './dist'), // 将打包结果放到 dist 目录中
filename: 'main.js' // 自定打包结果的文件名
}
}
执行打包
npx webpack --config webpack.config.js
> npm run build #执行命令
配置 npm scripts
- 方式1
./node_module/.bin/webpack
-方式2
npx webpack
-方式3 <span style="color:#fd7275">（使用）</span>
{
"name": "webpack-demos",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js" //npn run build
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.0.0",
"file-loader": "^4.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"style-loader": "^0.23.1",
"webpack": "^4.35.2",
"webpack-cli": "^3.3.5"
}
}
javascript 模块打包
模块概念
在模块化编程中，开发人员将程序分解为称为模块的离散功能块,每个模块的表面积小于完整程序，使验证，调试和测试变得微不足道。编写良好的模块提供了可靠的抽象和封装边界，因此每个模块在整个应用程序中具有一致的设计和明确的目的。
什么是webpack模块
<span style="color:#fd7275">webpack 模块可以以各种方式表达它们的依赖关系</span>
-一个ES2015import声明
-一个CommonJS的 require()声明
-一个AMD define和require声明
-css / sass / less文件中的@import语句。
-样式表（url(...)）或html（<img src=...>）文件中的图像URL 。
webpack 打包模式
//mode : 'none||production || development (默认) '
module.exports = {
mode: 'production'
};
- production 模式打包 上线适合
- development 开发模式打包 开发适合
- 如何没有配置会有警告，默认是development
webpack 打包css
安装两个样式包 style-loader css-loader
> npm install --save-dev style-loader css-loader
打包规则：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
打包测试：
1项目 添加样式
|- /src
+ |- style.css
|- index.js
2添加 SRC / style.css文件
.hello {
color: red;
}
3 添加 SRC / index.js 文件
+ import './style.css';
+ element.classList.add('hello');
4 测试
npm run build
...
Asset Size Chunks Chunk Names
bundle.js 76.4 KiB 0 [emitted] main
Entrypoint main = bundle.js
...
webpack 打包图片
添加依赖 ：npm install --save-dev file-loader
配置webpack.config.js 文件
module: {
rules: [
{
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
]
}
]
}
};
添加 一张图片
|- /src
+ |- icon.png
添加引用 SRC / index.js
+ import Icon from './icon.png';
+ // Add the image to our existing div.
+ const myIcon = new Image();
+ myIcon.src = Icon;
+
+ element.appendChild(myIcon);
在css 中添加图片 SRC / style.css文件
+ background: url('./icon.png');
合并命令
npm run build
...
Asset Size Chunks Chunk Names
da4574bb234ddc4bb47cbe1ca4b20303.png 3.01 MiB [emitted] [big]
bundle.js 76.7 KiB 0 [emitted] main
Entrypoint main = bundle.js
...
webpack 打包html
设置HtmlWebpackPlugin
安装依赖：npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
new CleanWebpackPlugin()，// 打包前先清理dist目录文件
plugins: [
+ new HtmlWebpackPlugin({
+ template:'html文件路径'
minify： {
removeComments：true， //删除注释
cokkapseWhitespace：ture //压缩
}
+ })
+ ],
清理dist 文件
HtmlWebpackPlugin默认情况下会生成自己的index.html文件，即使dist/文件夹中已有文件也是如此。这意味着它将index.html用新生成的文件替换我们的文件。 && 通常，/dist在每次构建之前清理文件夹是一种很好的做法，这样只会生成使用过的文件。让我们来处理。
new CleanWebpackPlugin()，// 打包前先清理dist目录文件
添加依赖clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
添加 webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin(), // plugins:
webpack 字体文件
更新 webpack.config.js
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
添加文件 my-font.woff my-font.woff2
|- /src
+ |- my-font.woff
+ |-
更新文件 SRC / style.css文件
+ @font-face {
+ font-family: 'MyFont';
+ src: url('./my-font.woff2') format('woff2'),
+ url('./my-font.woff') format('woff');
+ font-weight: 600;
+ font-style: normal;
+ }
webpack 打包less文件
添加依赖 $ npm install less-loader --save-dev
更新文件 webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loader: 'less-loader', // 将 less 转为 css，less-loader 依赖了 less
},
],
},
};
webpack ES6-ES5
安装依赖: npm i -D babel-loader @babel/core @babel/preset-env
添加文件 ：
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
更多更新
