一、loader
二、plugin
三、entry与output的基础配置
四、SourceMap配置
五、使用webpackDevServer 提升开发效率
——————————————
一、什么是loader
webpack默认只能打包js结尾的文件，如果需要打包如.jpg文件就需要相应的loader
图片篇
image.png
image.png
首先安装file-loader
npm install file-loader -D
然后在dist目录中会生成这个图片
image.png
打印出的就是在dist目录下的图片文件名
image.png
总结：webpack不能识别非js结尾的模块，因此需要借助loader提供打包方案进行打包
此外，可以添加一些配置项
image.png
options的配置里 name属性是打包后的名称：为[name]为源文件的name，[ext]:源文件的后缀，[hash]唯一的hash值
outputPath:是打包好后存放的目录为images/ ，最终会存放在dist/images中
url-loader
会将图片打包成一个base64文件打包到bundle.js中，注意当图片较小时这样做是非常好的选择， 因为可以减少http请求， 但是如果图片很大的时候就不要用这种方式了，可以用limit属性进行限制， 如下图 下雨10240字节（10kb）就会被打包成图片，如果小于10kb 才会被打包成base64编码文件
image.png
样式篇
css loader
image.png
二、plugin让打包更便捷
plugin 可以再webpack运行到某个时刻的时候帮你做一些事情。
htmlWebpackPlugin
这个插件会在打包结束后，自动生成一个html文件，并把打包生成的js文件自动引入到这个html文件中。可以 进行一些配置，如模板 template 定义以那个html文件为模板文件
image.png
cleanWebpackPlugin
image.png
这个作用是每次打包项目之前会自动删除dist目录，以免忘记手动删除而造成文件重复
三、entry与output的基础配置
entry
image.png
output
[name] 代表原文件的名称，publicPath的内容会在输入的js文件前加上
在这个例子中，最后会导出两个内容一模一样的js文件，一个是 http://cdn.com.cn/main.js 一个是http://cdn.com.cn/sub.js
image.png
四、SourceMap配置
作用：
如： 现在知道main.js 96行报错
SourceMap是一个映射关系，它知道dist目录下main.js中某一行所对应的是src目录下index.js文件中的某一行
现在就知道了是index.js中第一行代码出错了
使用：
无需安装
image.png
在开发环境中建议这样写，这是提示全并且速度快的方式
image.png
如果是生产环境 建议这样写
image.png
五、使用webpackDevServer 提升开发效率
作用：
当修改src中的源代码，dist目录会自动打包 ，直接刷新就可以看到变化，无需手动打包
实现方式
- 修改package.json文件 在后面加--watch
这样写以后，当修改代码webpack会自动感知到， 可以自动进行打包，但不会开启服务器也就是没办法发送ajax请求，而且还要手动刷新浏览器
image.png
2.使用webpackDevServer 会开启服务器且无需手动刷新浏览器，直接保存页面就能感知到
2.1安装 npm install webpackDevServer
2.2在webpack.config.json中进行配置
在根目录下的dist文件中启一个服务器
image.png
2.3 在package.json 进行配置
image.png
然后执行npm run start 就能够开启一个服务了
除此以外 还有其他一些配置 如
image.png
open 为 true 是自动打开一个浏览器
port 是端口号
网友评论