Danmo的学习之路（webpack）
一边啃JS和计网的书，一边来学webpack，学习完后就可以学习框架了，实战搞起来，理论补起来
文章目录
- 简介（P2）
- 五个核心概念（P3）
- 初体验（P4）
-
- 配置
- 打包应用
-
- 设置powershell
- 文件结构
- 指令介绍
- 实践（js）
- 实践（json）
- 打包样式资源（P5）
-
- 配置文件
- 其他文件
- 加载顺序
- 打包html资源
简介（P2）
- webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
- 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
- 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
五个核心概念（P3）
- Entry：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图
- Output：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名
- Loader： 让 webpack 能够去处理那些非JavaScript文件（翻译）
- Plugins：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。 - Mode：指示 webpack 使用相应模式的配置，分为development和production
初体验（P4）
配置
- 新建文件夹：webpack初体验
- npm init
- npm i webpack webpack-cli -g
- npm i webpack webpack-cli -D
打包应用
设置powershell
在执行以下指令以前，先设置powershell：解决webpack : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\webpack.ps1因为在此系统上禁止运行脚本
文件结构
指令介绍
- 开发环境指令：webpack src/index.js -o ./build/built.js --mode=development
功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成
浏览器能识别的语法。 - 生产环境指令：webpack src/index.js -o ./build/built.js --mode=production
功能：在开发配置功能上多一个功能，压缩代码。
备注：老师执行完开发环境指令后，在build目录下生成了built.js文件，而我执行完指令后，在build目录下生成了built.js目录，在该目录下有main.js文件，我猜测是配置方面的问题，因此我使用的指令是webpack src/index.js -o ./build --mode=development
实践（js）
index.js:
function add(x,y){
return x+y;
}
console.log(add(1,2));
main.js(development):
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => {
// webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ (() => {
eval("function add(x,y){\r\n return x+y;\r\n}\r\nconsole.log(add(1,2));\n\n//# sourceURL=webpack://webpack_test/./src/index.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {
};
/******/ __webpack_modules__["./src/index.js"]();
/******/
/******/ })()
;
main.js(production):
console.log(3);
//这里和老师的也不一样
无论是开发环境产生的main.js，还是生产环境产生的main.js，都可以运行（node或浏览器内）：
实践（json）
data.json:
{
"name": "jack",
"age": 18
}
修改index.js，再打包生成main.js文件：
import data from './data.json';
console.log(data);
function add(x,y){
return x+y;
}
console.log(add(1,2));
还是可以正常执行，说明webpack可以处理json
打包样式资源（P5）
注意，所有loader都需要用npm下载
配置文件
- webpack.config.js是webpack的配置文件
- 作用: 指示 webpack 干哪些活（当运行 webpack 指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs。
（模块化分为ES6模块和commonjs）
配置文件和src目录在同一层级
配置文件：
// resolve用来拼接绝对路径的方法（不懂照做，以后深入学node）
const {
resolve } = require('path');
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs的变量，代表当前文件的目录绝对路径（不懂照做）
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
// 详细loader配置
// 不同文件必须配置不同loader处理
{
// 匹配哪些文件（正则表达式）
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序：从右到左，从下到上 依次执行（很重要）
// 创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 需要下载 less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
],
// 模式
mode: 'development', // 开发模式
// mode: 'production'
}
其他文件
此处以css为主，就不写less文件了
index.js:
// 引入样式资源
import './index.css';
import './index.less';
index.css:
html, body{
margin: 0;
padding: 0;
height: 100%;
background-color: pink;
}
加载顺序
- 首先通过entry加载index.js
- 加载index.js后，发现它依赖了index.css
- 现在有js和css两个资源，每个资源都要经过rules中的loader处理
- 根据test，css资源匹配，会使用其中的loader对css资源进行处理
- loader从下往上进行处理
- css-loader将css文件变成commonjs模块加载js中，里面内容是样式字符串，可以在输出的built.js文件中检查到
- style-loader在页面打开时，创建style标签，将js中的样式资源插入style标签，再添加到head中生效
想要查看效果，只需把built.js文件引入html即可
打包html资源
重点是配置plugins，记得下载和引用plugins
下载：npm i html-webpack-plugin -D
config:
/*
loader: 1. 下载 2. 使用（配置loader）
plugins: 1. 下载 2. 引入 3. 使用
*/
const {
resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader的配置
]
},
plugins: [
// plugins的配置
// html-webpack-plugin
// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
// 需求：需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template: './src/index.html'
})
],
mode: 'development'
};
index.js:
function add(x, y) {
return x + y;
}
console.log(add(2, 3));
index.html:（没有引入index.js）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpacktitle>
head>
<body>
<h1 id="title">hello htmlh1>
body>
html>
打包后，在build目录下生成了index.html:
（这里老师直接在终端输入webpack就可以打包了，我也不知道为什么）