学习webpack【第三章-核心概念1】

一、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目录会自动打包 ，直接刷新就可以看到变化，无需手动打包

实现方式

1. 修改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 是端口号