bigpatten的博客

1. webpack打包原理： 把所有的依赖打包成bundle.js文件，通过代码分割成单元片段并按需加载。 2. bundle，chunk，module分别是什么： bundle: 由webpack打包出来的文件； chunk：webpack在进行进行模块依赖分析的时候由代码分割而出来的代码块； module：开发中的单个模块。 3. 什么是loader，什么是plugin loader用于加载一些资源文件，由于webpack只能打包符合common.js规范的js文件，而对于css样式文件，html网页

关于webpack的面试题 随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。 而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。 然而大多数的使用者都只是单纯的会使用，而并不知道其深层的原理。希望通过以下的面试题总结可以帮助大家温故知新、查缺补漏，知其然而又知其所以然。 问题一览 webpack与gru

我们知道，使用npx webpack --watch 可以监听文件的改变，自动的帮我们打包，我们为了查看页面的效果，需要我们找到打包后生成的文件，然后再浏览器中运行该文件。这种打包回一遍又一遍的直接生成文件到磁盘上，比较消耗资源。 其实还有一种方法可以实现类似的功能，那就是使用webpack-dev-server自动打包插件。 安装 npm install webpack-dev-server --save-dev 使用 安装完毕后，就可以使用命令执行它了： npx webpack-dev-server

我们前面在快速入门部分学习的时候知道：使用webpack打包非JS文件的时候，是打包不成的，如果确实需要，需要加载对应的loader，比如我们前面使用过 style-loader 和 css-loader。 webpack 中 loader 的调用过程： 1. 在webpack配置中使用loader loader使用前要安装，这点我们无需多言，关于loader的使用方式，我们前面已经见过两种，不过都不是推荐的使用方式，这里我们再讨论一种使用配置文件配置loader规则的用法。 1.1 配置打包css文件

1. 指定配置文件执行打包 我们前面的使用只是使用的命令行操作，我们知道，使用webpack命令的时候可以传递一些参数，但是如果参数很多的话，命令会编写的很长，而且每次都要写这么长，显得比较麻烦，因此我们比较推荐使用配置文件来配置webpack打包时的一些参数。 这里我们说明一下，我们以后养成一个好习惯，就是将我们的源代码放到src目录下，将打包生成的文件放到dist目录下，比如我们的目录结构可以是这样的： 1.1 简单配置 在项目的根目录创建一个webpack.config.js文件，在里面添加内容：