webpack基础知识

更多内容已经迁移至掘金，欢迎来指导学习：

https://juejin.im/post/5d64ca3551882537930bc065

 

# 介绍

1. webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源

2. Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

3. webpack 更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能

# JS文件中引入css的方法：

1. require('./index.css');

2. import './index.scss';

# loader

1. 用于对模块的源代码进行转换

2. loader 可以使你在 import 或"加载"模块时预处理文件

3. loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL

4. loader 允许你直接在 JavaScript 模块中 import CSS文件！

 

# 热更新功能必须满足以下5个条件

1.引入webpack

2.output里加publicPath

3.devServer中增加hot:true

4.devServer中增加hotOnly:true

5.在plugins中配置 new webpack.HotModuleReplacementPlugin()