Webpack In Action Note

2021-01-21 19:13

阅读：428

YPE html>

标签：导入资源 es6 statement typeof 修改 bee mode charset

P1.课程介绍
- 视频教程
- 环境参数
- 预备技能
P2.Webpack简介
- 项目
  - 初始化项目
  - 安装jquery
  - 创建基本文件
  - 出现的问题
  - 构建工具
- Webpack是什么
  - 入口文件
P3.Webpack的5个核心概念
- Entry
- Output
- Loader
- Plugins
- Mode
P4 Webpack初体验
- 创建项目
  - 初始化项目
  - 安装webpack和webpack-cli
- 创建基本文件
- 项目结构
- 首页index.html
- 入口文件
- 运行开发指令
- 运行生产环境指令
  - 结论
- 验证Json文件的打包
  - 结论
- 验证处理css文件
  - 结论
P5.打包样式资源
- 打包CSS文件
  - webpack的配置和引入Loader
  - 安装style-loader和css-loader
  - 运行webpack
- 打包less资源文件
  - less-loader
  - web配置文件添加less-loader
  - 其它文件
  - 运行webpack

P1.课程介绍

视频教程

尚硅谷2020最新版Webpack5实战教程(从入门到精通)
https://www.bilibili.com/video/BV1e7411j7T5?p=1
我的代码：https://github.com/K-Artisan/webpack-in-action-note

环境参数

Node.js 10+
Webpack 4.26+

预备技能

基本Node.js知识和 Npm指令
熟悉ES6

P2.Webpack简介

项目

初始化项目

cnpm init

在项目配置的步骤中

package name输入： webpack-first-demo，
main：index.js
其它默认

安装jquery

cnpm install jquery --save

创建基本文件

index.html




webpack简介

Hello Webpack

index.js

import $ from ‘jquery‘;

$(function () {
    $(‘#title‘).click(function () {
        $(‘body‘).css(‘backgroundColor‘, ‘deeppink‘);
    });
})

index.less

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: pink;
}

#title{
    color: #ffffff;
}

出现的问题

浏览器无法识别ES6的语法

至此在浏览器中浏览出现如下错误提示：

Uncaught SyntaxError: Cannot use import statement outside a module

原因是：

浏览器无法识别ES6的语法
浏览器无法识别less文件
浏览器无法识别less文件，需要工具将less文件编译成css文件
浏览器无法识别其它语言
浏览器无法识别其它语言(如jsx，vue)，需要特定的工具转化成js语法

构建工具

鉴于上节出现的问题，需要一个大的工具，把上面需要的一些小工具包装来，webpack就是这样一种构建工具

Webpack是什么

Webpack 是一种前端资源构建工具，一个静态模块打包器（module bunndler）。在Webpack看来，前端的所有资源文件（js\json\css\img\less...）都会作为模块处理
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

入口文件

一般Rect、Vue开发，通常会将一个文件中引入整个项目需要的所有资源，如本例中的index.js，该文件称之为入口文件，在入口文件引入文件后

//引入js资源
import $ from ‘jquery‘;
//引入样式资源
import ‘./index.less‘;
//引入图片、字体等资源
//...

就会产生一条依赖链：

├── index.js/
    ├── index.js 
    ├── index.less
    ├── jquery.js

Webpack将这些文件组成一个chunk（块），然后编译成浏览器能识别的js语法、css语法等，这个过程叫打包，然后输出一个文件，即bundle

├──入口文件：index.js
    ├── index.js                               
    ├── index.less        
    ├── jquery.js  
    ├── ...
 => webpack 
 => [chunk]
 => 编译
    ├── xxx.js(ES6，Vue等) ->js
    ├── index.less ->css  
 =>输出bundle.js

P3.Webpack的5个核心概念

https://www.webpackjs.com/concepts/

Entry

指示 webpack 应该使用哪个文件为入口启动开始打包，来作为构建其内部依赖图的开始。

Output

告诉 webpack 打包后的资源bundles输出到哪里，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

Loader

让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）

Plugins

插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

Mode

模式（Mode）指示webpack使用相应的模式配置

选项	描述	特点
development	会将process.NODE_ENV的值设置为development,启用NamedChunksPlugin和NamedModulesPlugin	能让代码本地调试运行的环境
production	会将process.NODE_ENV设置为production,启用ModuleConcatenation，NoEmitOnErrorsPlugin等	能让代码优化上线运行的环境

P4 Webpack初体验

创建项目

初始化项目

cnpm init

初始配置如下：

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "Webpack初体验",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装webpack和webpack-cli

这里进行全局安装

cnpm install webpack webpack-cli -g

在添加到开发依赖

cnpm install webpack webpack-cli -D

这时package.json文件，新增如下开发依赖:

  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }

创建基本文件

项目结构

手动创建文件夹及其文件:

build
src和 src/index.js
src\index.html

至此，项目结构如下：

/P04.Webpack初体验
    ├── build                               
    ├── src  
        ├── index.html
        ├── index.js  
    ├── node_module 
    ├── package.json

首页index.html

创建首页文件build/index.html







Document

入口文件

将入口文件index.js修改为:

/*
index.js: webpack入口起点文件

1. 运行指令：
   开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
   生成环境：webpack ./src/index.js -o ./build/built.js --mode=production
*/

function add(x, y) {
    return x + y;
}

console.log(add(1,2));

运行开发指令

webpack ./src/index.js -o ./build/built.js --mode=development

结果提示：

Hash: b67461cf072bee7f194e
Version: webpack 4.43.0
Time: 142ms
Built at: 2020-07-13 1:18:15
   Asset      Size  Chunks             Chunk Names
built.js  4.03 KiB    main  [emitted]  main
Entrypoint main = built.js
[./src/index.js] 240 bytes {main} [built]

Hash:每次运行命令都产生一个唯一值

开发环境打包的输出的文件built.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== ‘undefined‘ && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: ‘Module‘ });
/******/ 		}
/******/ 		Object.defineProperty(exports, ‘__esModule‘, { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === ‘object‘ && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, ‘default‘, { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != ‘string‘) for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module[‘default‘]; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, ‘a‘, getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/index.js":
/*!**********************!*  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("/*\r\nindex.js: webpack入口起点文件\r\n\r\n1. 运行指令：\r\n   开发环境：webpack ./src/index.js -o ./build/built.js --mode=development\r\n   生成环境：\r\n\r\n*/\r\n\r\nfunction add(x, y) {\r\n    return x + y;\r\n}\r\n\r\nconsole.log(add(1,2));\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

/******/ });

运行生产环境指令

webpack ./src/index.js -o ./build/built.js --mode=production

数据结果:

Hash: 36798d9d9dd4621913cb
Version: webpack 4.43.0
Time: 357ms
Built at: 2020-07-13 1:26:56
   Asset       Size  Chunks             Chunk Names
built.js  946 bytes       0  [emitted]  main
Entrypoint main = built.js
[0] ./src/index.js 300 bytes {0} [built]

生产环境打包的输出的文件built.js

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log(1+2)}]);

在浏览器中运行，在控制台查看输出：

结论

生产环境生产的代码进行了优化压缩
生成环境和开发环境将ES6模块化编译成浏览器能识别的模块化

验证Json文件的打包

创建json文件src\data.json:

{
    "name": "jack",
    "age": 18
}

在src/index.js引入 json文件

import data from ‘./data.json‘;
...
console.log(data);

再次运行build指令：

webpack ./src/index.js -o ./build/built.js --mode=development

输出结果：

Hash: ef5d53549838e82e088b
Version: webpack 4.43.0
Time: 76ms
Built at: 2020-07-13 1:45:13
   Asset      Size  Chunks             Chunk Names
built.js  4.75 KiB    main  [emitted]  main
Entrypoint main = built.js
[./src/data.json] 40 bytes {main} [built]
[./src/index.js] 333 bytes {main} [built]

查看输出文件built.js

...
/***/ "./src/data.json":
/*!***********************!*  !*** ./src/data.json ***!
  \***********************/
/*! exports provided: name, age, default */
/***/ (function(module) {

eval("module.exports = JSON.parse(\"{\\\"name\\\":\\\"jack\\\",\\\"age\\\":18}\");\n\n//# sourceURL=webpack:///./src/data.json?");
...

将data.json文件也引入

浏览器控制台输出：

3
{name: "jack", age: 18}
name: "jack"
age: 18
...

结论

webpack可以处理Json文件

验证处理css文件

创建css文件src\index.css:

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: pink;
}

在src/index.js引入 index.css文件

import ‘./index.css‘;
...

再次运行build指令：

webpack ./src/index.js -o ./build/built.js --mode=development

输出结果：

ERROR in ./src/index.css 2:5
Module parse failed: Unexpected token (2:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| body,
> html {
|     margin: 0;
|     padding: 0;
 @ ./src/index.js 9:0-21

报错了！！！，打包失败了

结论

Webpack不能处理css/img等其它资源，

那如何打包css/img等其它资源，请看下一节

P5.打包样式资源

打包CSS文件

Webpack不能处理css资源，需要引入Loader，

参考官方文档：https://www.webpackjs.com/concepts/loaders/

webpack的配置和引入Loader

在项目根目录下创建webpack的配置文件webpack.config.js：

/*
文件名：webpack.config.js:webpack配置文件
作  用：指示webpackg干什么活，当运行webpack指令时，会加载里面的配置

所以的构建工具都是基于node.js 平台运行的，模块化默认采用commonJs

*/

const {
    resolve //用于拼接绝对路径
} = require(‘path‘);

module.exports = {
    //入口起点
    entry: ‘./src/index.js‘,
    //输出
    output: {
        //输出文件名
        filename: ‘built.js‘,
        //输出路径
        //__dirname:nodejs的全局变量，表示当前文件所在目录的绝对路径
        path: resolve(__dirname, ‘build‘)
    },
    //Loader的配置
    module: {
        rules: [ //详细的loader配置
            // css-loader
            {
                //匹配那些文件，这里使用正则表达式进行匹配
                test: /\.css$/,
                //使用哪里具体的loader，执行顺序是从下往上
                use: [
                    //创建style标签，将js中的样式资源插入，添加到head中生效
                    ‘style-loader‘,
                    //将css文件变成commonJs模块加载到js中，里面的内容是样式字符串
                    ‘css-loader‘
                ]
            },
        ]
    },
    // plugins的配置
    plugins: [

    ],
    //模式
    mode: "development"
    //mode:"production"

}

安装style-loader和css-loader

cnpm install style-loader css-loader -D

  "devDependencies": {
    "css-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }

运行webpack

在命令行输入

webpack

输出结果：

Hash: c210dbb4c83cb16ce67b
Version: webpack 4.43.0
Time: 459ms
Built at: 2020-07-13 3:08:03
   Asset    Size  Chunks             Chunk Names
built.js  17 KiB    main  [emitted]  main
Entrypoint main = built.js
[./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js!./src/index.css] 363 bytes {main} [built]
[./src/index.css] 557 bytes {main} [built]
[./src/index.js] 255 bytes {main} [built]
    + 2 hidden modules

build\bulit.js文件中导入的index.css

...

/***/ "./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js!./src/index.css":
/*!*******************************************************************************!*  !*** ./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js!./src/index.css ***!
  \*******************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/_css-loader@3.6.0@css-loader/dist/runtime/api.js */ \"./node_modules/_css-loader@3.6.0@css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"body,\\r\\nhtml {\\r\\n    margin: 0;\\r\\n    padding: 0;\\r\\n    height: 100%;\\r\\n    background-color: pink;\\r\\n}\\r\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./src/index.css?./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js");

/***/ }),
    
....

打包less资源文件

创建src\index.less文件：

#title {
    color: brown;
}

并在index.js文件中导入

import ‘./index.less‘;

less-loader

less-loader 将less文件编译成css文件,

需要下载安装：less和less-loader

cnpm install less --save-dev
cnpm install less-loader --save-dev

  "devDependencies": {
    ...
    "less": "^3.11.3",
    "less-loader": "^6.2.0",
  }

web配置文件添加less-loader

    //Loader的配置
    module: {
        rules: [
            ....
            // 处理less文件
            {
                //匹配那些文件，这里使用正则表达式进行匹配
                test: /\.less$/,
                //使用哪里具体的loader，执行顺序是从下往上
                use: [
                    //创建style标签，将js中的样式资源插入，添加到head中生效
                    ‘style-loader‘,
                    //将css文件变成commonJs模块加载到js中，里面的内容是样式字符串
                    ‘css-loader‘,
                    //将less文件编译成css文件
                    //需要下载less和less-loader
                    ‘less-loader‘
                ]
            },
        ]
    },
        ...

其它文件

index.html


    标题

运行webpack

在命令行输入

webpack

输出结果：

Hash: 607e9846a1cfaea095e5
Version: webpack 4.43.0
Time: 467ms
Built at: 2020-07-13 3:49:59
   Asset      Size  Chunks             Chunk Names
built.js  19.6 KiB    main  [emitted]  main
Entrypoint main = built.js
[./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js!./node_modules/_less-loader@6.2.0@less-loader/dist/cjs.js!./src/index.less] 280 bytes {main} [built]
[./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js!./src/index.css] 363 bytes {main} [built]
[./src/index.css] 557 bytes {main} [built]
[./src/index.js] 275 bytes {main} [built]
[./src/index.less] 617 bytes {main} [built]

Webpack In Action Note

标签：导入资源 es6 statement typeof 修改 bee mode charset

原文地址：https://www.cnblogs.com/easy5weikai/p/13291977.html

上一篇：JS 10位、13位时间戳转日期

下一篇：CSS实现垂直居中的常用方法

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Webpack In Action Note
文章链接：http://soscw.com/index.php/essay/45099.html

亲，登录后才可以留言！

Webpack In Action Note

P1.课程介绍

视频教程

环境参数

预备技能

P2.Webpack简介

项目

初始化项目

安装jquery

创建基本文件

Hello Webpack

出现的问题

构建工具

Webpack是什么

入口文件

P3.Webpack的5个核心概念

Entry

Output

Loader

Plugins

Mode

P4 Webpack初体验

创建项目

初始化项目

安装webpack和webpack-cli

创建基本文件

项目结构

首页index.html

入口文件

运行开发指令

运行生产环境指令

结论

验证Json文件的打包

结论

验证处理css文件

结论

P5.打包样式资源

打包CSS文件

webpack的配置和引入Loader

安装style-loader和css-loader

运行webpack

打包less资源文件

less-loader

web配置文件添加less-loader

其它文件

标题

运行webpack

评论

热门文章

推荐文章

最新文章

置顶文章