Danmo的学习之路（webpack）

最新推荐文章于 2022-09-01 17:35:45 发布

DanmoSAMA

最新推荐文章于 2022-09-01 17:35:45 发布

阅读量557

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/m0_51235736/article/details/116560138

版权

其他专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一边啃JS和计网的书，一边来学webpack，学习完后就可以学习框架了，实战搞起来，理论补起来

文章目录

简介（P2）
五个核心概念（P3）
初体验（P4）
打包样式资源（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）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>

<body>
  <h1 id="title">hello html</h1>
</body>

</html>