webpack打包(二)

将图片打包:要依赖file-loader
首页，我们还是要先建立一个文件夹demo
然后cmd进入文件夹
1.先进行初始化
npm init -y
2.安装webpack以及插件
npm install --save-dev [email protected]版本号
webpack在安装4.0以上版本,还需要安装一个插件 (-cli);
npm install --save-dev webpack-cli
还有我们图片的依赖
npm install file-loader --save-dev
3.建立我们需要的文件夹
如在dist文件夹建立index.html(引入我们打包的js)
在dist文件夹中加入我们需要打包的图片
在dist文件夹中添加index.js
在dist文件夹中添加test.css(引入我们的图片)
如:div{
background: url(./1.gif);
}
在我们的index.js中引入我们的test.css
改变我们的配置文件webpack.config.js

有两种方法:
1)css直接打包
import “./test.css”;
$("

").css({“width”:256,“height”:256}).appendTo(“body”)
2) js打包
import fruit from “./1.gif”;
var img = new Image();
img.src = fruit;
$(‘body’).append(img)
// 图片的盒子
$("").css({“width”:256,“height”:256}).appendTo(“body”)
4.在cmd中输入指令就可以打包啦
npx webpack --config webpack.config.js --mode development
打开index.html就可以查看啦
tip:注意文件路径

打包json
首页，我们还是要先建立一个文件夹demo
然后cmd进入文件夹
1.先进行初始化
npm init -y
2.安装webpack以及插件
npm install --save-dev [email protected]版本号
webpack在安装4.0以上版本,还需要安装一个插件 (-cli);
npm install --save-dev webpack-cli
加入json依赖
npm install json --save-dev
3.新建一个data.json在js文件夹
引入我们的json文件
import data from “./data.json”;
4.在上面的图片中加入我们的rules加入
{
test:/.(csv|tsv)$/,
use:[
“csv-loader”
]
}
5.打包
npx webpack --config webpack.config.js --mode development

此文章是一些比较基础的操作，希望对大家有所帮助。如有错误请指出