loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言转换

模块化就是把单独的一个功能封装到一个模块中, 模块之前相互隔离, 但是可以通过特定的接口公开内部成员, 也可以依赖别的模块。webpack 是一个流行的前端构建工具 提供了友好的模块化支持 , 以及代码压缩混淆, 处理js兼容性问题 , 性能优化等强大的

‘vue‘:‘Vue‘,

下载完成后，一直点击下一步即可。安装完成后 运行 node -v和 npm -v 如果成功显示版本号即为安装成功。webpack 的作用，简单来说就是对前端中所有的模块进行打包，输出一个JS文件，后续引入这个JS文件。下面经过漫长的等待，只要显示 Proj

指定版本号npm install -g. 为什么全局安装后，还需要局部安装呢？当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

"builder": "@angular-builders/custom-webpack:browser", 这里进行替换。一共需要替换两处，添加一处信息 具体替换，注意 如果需要使用postcss-loader 需

如图，在vue项目中import自己定义的组件时，‘@api/table’出现下划线，ctrl+右键点击不会跳转到对应组件。鼠标移上去显示Module is not installed，多方查询后终于弄清楚了原因。之所以出现上述问题是因为在下图中的webp

　　最近面试了一些公司，趁着疫情期间，总结一波。大家可以看看 会有用的。这就需要对应的loader将资源转化，加载进来。loader是用于加载的，它作用于一个个文件上。plugin 用于扩展webpack的功能。而plugin的功能更加的丰富，而不仅局限于

在最近的项目里，页面和静态文件并不是很多的情况下，打包后发现产出的静态资源却很大。

当我们在做打包的时候，在某一些具体时刻，帮我们做一些事情。apply{ // 调这个插件时会执行apply方法，complier--webpack实例。同步时刻会有所差异，如compile:. 　　 --inspect表示要开启node调试工具，

为什么前端存在跨域

webpack是基于Node构建，所以wepack支持所有Node API和语法。Chrome不支持ES6，所以webpack也不支持。"test": "echo \"Error: no test specified

在.prettierrc文件中更改设置"printWidth":200, 将每行代码的文字数量更改为200. 安装一个插件在项目build阶段移除所有的console信息。打开项目控制台，点击依赖->开发依赖，输入babel-pl

并且会自动处理js之间相关的依赖。将ES6转成ES5代码，将Typescript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成。这时候就需要给webpack拓展对应的loader. const path = require;

This is probably not a problem with npm. There is likely additional logging output above.A complete log of this run can be found

由于之前代码示例都被遗留下来，导致/dist文件夹相当杂乱。由于配置的改变，webpack 会生成新的文件放置在/dist文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。通常，在每次构建前清理/dist文件夹，是比较推荐的做法，需要

1，不同环境下打包：开发环境和生产环境。3，js压缩以及js转码。4，css压缩和css前缀

//output 是指页面通过webpack打包后生成的目标文件放在什么地方去，此处是在根目录下生成build文件夹，该文件夹内有一个build.js文件；//resolve 定义了解析模块路径时的配置，常用的就是extensions; 可以用来指定模块的

前面三节，我主要给大家分享了有关webpack的一些配置的知识点，如何打包js文件，而如果我们遇到其他类型的资源如图片、css、字体font等等，我们该如何处理呢？今天会介绍预处理器，它赋予了Webpack可处理不同资源类型的能力，极大丰富了其可扩展性。执

vue init webpack vuedemo