携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

webpack核心概念

1.entry：入口模板文件路径

2.output：输出bundle文件路径

3.module：模块，webpack构建对象

4.bundle：输出文件，webpack构建产物

5.chunk：中间文件，webpack构建的中间产物

6.loader：文件转换器

7.plugin：插件，执行特定任务

webpack入门

npm init 初始化项目
创建 src/index.js
创建 public/index.html
创建 webpack.config.js，并填入配置
执行 npm install -D webpack webpack-cli
配置 build 命令为 webpack
执行 npm run build 完成打包构建

src/index.js

console.log('hello')

webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js'
    }
}

package.json

"scripts": {
    "build": "webpack"
  }

执行 npm run build进行打包

看下打包后的代码

(() => {
	var __webpack_modules__ = ({
 "./src/index.js":
 (() => {
  eval("console.log('hello')\n\n//# sourceURL=webpack://wp/./src/index.js?");
 })

});
  var __webpack_exports__ = {};
  __webpack_modules__["./src/index.js"]();
	
})()
;

从打包后的代码中看出

首先是一个自执行的函数

有一个__webpack_modules__和一个__webpack_exports__，

__webpack_modules__是一个对象，key就是入口文件，value就是文件中的代码

__webpack_exports__是输出的对象，代码中没有输出，所以就是空对象

接着 __webpack_modules__找到入口文件并执行

webpack source map原理

在webpack.config.js中添加 source map

devtool: 'source-map'

重新执行 npm run build

这个时候会生成两个文件

首先看下 bundle.js

从代码中最后一行可以看到 sourceMappingURL=bundle.js.map 执行这个文件

/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!**********************!*\
  !*** ./src/index.js ***!
  **********************/
console.log('hello')
/******/ })()
;
//# sourceMappingURL=bundle.js.map

接着看下 bundle.js.map这个文件

里面有版本号、打包后的文件

里面的分号有 6个，说明打包映射的代码是 bundle.js中的第6行

sources是源码文件

sourcesContent是映射的内容

{
    "version":3,
    "file":"bundle.js",
    "mappings":";;;;;AAAA,oB",
    "sources":["webpack://wp/./src/index.js"],
    "sourcesContent":["console.log('hello')"],
    "names":[],
    "sourceRoot":""
}

这就是source map的基本原理

webpack loader打包css

q:webpack loader解决什么问题？

a:将除js文件以外的其他资源转换为js

1.创建index.css

2.在index.js中引用index.css

3.重新执行 npm run build 会报错

webpack核心概念入门

webpack核心概念

webpack入门

webpack source map原理

webpack loader打包css