Webpack学习心得

关注

原创最新推荐文章于 2026-08-22 15:25:23 发布 675 阅读 AI 写同款· GEO 优化 ›

一、webpack基本学习如果我们想在自己的模块中加入一些比较特别的内容：比如添加一个noscript标签，在用户的JavaScript被关闭时，给予相应的提示；比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签这个时候我们需要一个属于自己的index.html模板：阅读详情

一、webpack简介

能把各种资源，例如JS(含JSX)，coffee，样式（含less/sass），图片等都作为模块来使用和处理，因此，webpack中的js可以引用css,css中可以嵌入图片dataUrl

二、webpack的优势
webpack是一个前段工具，可以让各个模块进行加载，预处理操作后，在进行打包的过程；它有Grunt和Gulp所有的的基本功能。
优点：

支持commonJS和AMD模块。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
使用模块加载器，可以支持sass,less等处理器进行打包且支持静态资源样式以及图片进行打包。

三、webpack的安装
1. 安装全局的webpack命令：npm install -g webpack.
2. 在项目的根目录下创建配置项：npm install
3. webpack安装作为项目开发所需要的依赖项：npm install –save-dev webpack
4. webpack打包命令：
（1）、webpack app/main.js public/webpack.js。
app/main.js是要打包的文件目录，public/webpack.js是要打包后的文件路径和名称。

（2）、新建webpack.config.js文件，在里面写上

运行命令：webpack
（3）、在package.json中script标签内添加一个命令行：”start”:”webpack”,
这里写图片描述
运行命令：npm start
（4）、在方法三中的 start方法是node自带的方法，如果把”start”换成其他的名称如“hid”，
则运行命令：npm run hid 即可。
四、webpack之loaders
（一）、Loaders是webpack最核心的功能。
通过使用不同的loader，webpack通过调用外部的脚本或者工具可以对各种各样的格式的文件进行处理，譬如：分析JSON文件并把它转换成JavaScript文件，或者说把下一代的JS文件（ES6，ES7）转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。
（二）、loader配置
loader需要单独安装并且需要在webpack.config.js下modules关键字下进行配置，Loaders的配置选项包括一下几个方面：
1. test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
2. loader：loader的名称（必须）
3. include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
4. query:为loaders提供额外的设置选项（可选）
（三）、webpack样式表的处理

webpack提供两个工具处理样式表：css-loader和style-loader
css-loader可以使用@import和url(）的方法实现reuqire()的功能，style-loader将所有的计算后的样式加入页面中，二者结合在一起能够把样式表嵌入到webpack打包后的JS文件中
安装命令：npm install –save-dev style-loader css-loader json-loader
配置项写法：

CSS样式对浏览器兼容时，添加相应的插件：
安装插件：npm install -save-dev postcss-loader autoprefixer

（四）、Babel的安装与配置
Babel是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把他们整合在一起使用，但是对于每一个你需要的功能或者拓展，都需要安装单独的包（用得最多是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）
安装： npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
安装React：npm install –save react react-dom
配置项写法：

{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel',//在webpack的module部分的loaders里进行配置即可
    query:{
        preset:['es2015','react']
    }
}

五、插件（Plugins）
插件（Plugins）是用来拓展Webpack功能的，在整个构建过程中生效，执行相关任务。
Loaders和Plugins区别：
loaders是在打包构建过程中用来处理源文件的（JSX, Scss，Less，…）,一次处理一个
Plugins并不直接操作单个文件，直接对整个构建过程起作用。
要使用某个插件，我们需要通过npm安装，然后需要在webpack配置中的plugins关键字部分添加该插件的是个实例（plugins是一个数组）。
例子：
需要在配置文件的最开始调用webpack插件
var webpack = require(‘webpack’);
然后再module.exports={}里添加一个plugins的关键字
pulgins:[ new webpack.BannerPlugins(“关键字”)]；
六、Webpack自动刷新浏览器
webpack开发服务器，是webpack官方提供的一个辅助开发工具，自动监控项目下的文件，一旦有修改保持的操作，就会自动执行打包命令，将我们的diamante重新打包，并且需要的话还可以刷新浏览器。
安装：npm install –save-dev webpack-dev-server