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()
 
 
 
 
 
 
 
 
 
 
 
 
原文地址:https://www.cnblogs.com/songxia/p/10299888.html