打包其他资源
需要安装的
npm install --save-dev html-webpack-plugin 处理html
npm i url-loader file-loader -D处理图片
打包HTML资源
需要安装
npm install --save-dev html-webpack-plugin
下载完还需要引用
const HtmlWebpackPlugin = require('html-webpack-plugin');
打包图片资源
然后在index.less文件里输入css代码,在index.html中输入
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
// 图片大小小于 8kb,就会被 base64 处理
// 优点: 减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 问题:因为 url-loader 默认使用 es6 模块化解析,而 html-loader 引入图片是 commonjs
// 解析时会出问题:[object Module]
// 解决:关闭 url-loader 的 es6 模块化,使用 commonjs 解析
//注意目前新版本已经处理好了,默认都给关闭掉了
// esModule: false,
// 给图片进行重命名
// [hash:10]取图片的 hash 的前 10 位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
},
在这直接打包会报错,需要下载
npm i url-loader file-loader -D
但是在这里有一个注意点:如果直接在index.html文件内输入
<img src="./images/3.jpeg" alt="1.gpg">
图片会显示不出来,我们需要在webpack.config.js中再配置
问题:默认处理不了html中img图片
{
test: /\.html$/,
// 处理 html 文件的 img 图片
//(负责引入 img,从而能被 url-loader 进行处理)
loader: 'html-loader'
}
打包完会被解析成哈希模式
打包其他资源
可到阿里巴巴矢量图图标库下载几个矢量图,iconfont.css 和 字体文件 来源于 阿里iconfont
加入购物车后,直接点下载代码
在html文件输入
<span class="iconfont icon-iconfont-zan"></span>
<span class="iconfont icon-dianhua"></span>
<span class="iconfont icon-mimakejian"></span>
<span class="iconfont icon-xiaoxi"></span>
创建文件:
配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
//打包其他资源(除了html/js/css资源以外的资源)
{
//排除css/js/html资源
exclude:/\.(css|js|html)$/,
loader:'file-loader'
}
],
},
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
],
};
最后打包就ok了
总结
1.要支持Commonjs模块化规范,所以要求打包后的最后结果也遵守该规则
2.Npm模块使用者的环境是不确定的,很有可能并不支持ES6,所以打包的最后结果应该是采用ES5编写的。并且如果ES5是经过转换的,请最好连同SourceMap一同上传。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。