webpack4基本使用和url-loader压缩图片
执行npm init -y, 创建package.json 文件
最基本的配置文件
entry:入口文件
output：出口，出口里面添地址，和导出的包的名字
mode 是模式默认production，可以选择为development，也可none
production：生产模式：去掉debug代码，和未使用的方法函数模块，小体积,速度快
development：开发模式：文件会大些，包含debug代码等
const path = require('path')
module.exports = {
entry:path.join(__dirname,'./src/js/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'mainbunle.js'
},
mode:'development'
}
也可以不加path.join：
module.exports = {
entry:'./src/js/main.js',
output:{
path:path.join(__dirname,'./dist'),
filename:'mainbunle.js'
},
mode:'development'
}
一次打包多个文件
module.exports = {
entry:{
main:'./src/js/main.js',
home:'./src/js/home.js',
about:'./src/js/about.js',
},
output:{
path:path.join(__dirname,'./dist'),
filename:'[name].bunle.js'
},
mode:'development'
}
filename:'[name].bunle.js' 这句话表示在输出时文件的名字根据上面的名字来定[main,home,about].bunle.js
Loaders 预加载
npm init -y
npm install url-loader -S//url-loader下载的图片格式用的loader插件
npm install file-loader -S
可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：
npm install --save-dev css-loader//如果用到css文件预加载
npm install --save-dev ts-loader//如果用到ts文件预加载
可以将各种类型文件转成js格式上传网站
例如将图片使用loader打包成base64格式，放在js文件中引用
这里预加载文件的格式位正则匹配/.(png|jpg|gif)$/i格式位png，jpg，gif，的文件进行预加载
options: {
limit:18192
}
表示文件最大大小为 18192 = >18KB，如果js中imort引入的图片大于这个值，打包不会成功，会多出一个图片的文件，成功的话就会在指定路径生成一个新的js文件，在html文件中引入这个包，就可以使用导入的img了
配置文件：
module.exports = {
entry:path.join(__dirname,'./src/js/loaderImg.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'loader_img.js'
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit:18192
}
}
]
}
]
}
}
js文件
import img from '../img/vuelogo.png'//引入img
console.log("LoaderImg");
//将img渲染到dom中
let oImg = document.createElement('img');
oImg.src = img;
document.body.appendChild(oImg);
html文件中引用webpack打包后的js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="dist/loader_img.js"></script>
</body>
</html>
图片就显示出来了，这里用的是url-loader，如果要预加载css文件或别的类型的文件需下载对应的loader插件
下面是用webpack-dev-serve热加载后包会放在根目录下，存放在内存中，项目中看不到包的行为，使用 publicPath 配置会看到打包好的文件。
webpack-dev-server也会进行打包，代码只要一变动，它就会打包，只不过它打包到的地方是计算机的内存，在硬盘中看不到。再具体一点，默认情况下，webpack-dev-server 会把打包后的文件放到项目的根目录下，文件名是在output配置中的filename. 但是当有publicPath 配置的时候，就不一样了。Webpack 会把所有的文件打包到publicPath指定的目录下，就是相当于在项目根目录下创建了一个publicPath目录, 然后把打包成的文件放到了它里面，只不过我们看不到而已, 文件名还是output配置中的filename。
新建一个文件夹webpack-tut, 执行npm init -y, 创建package.json 文件，同时初始化为node 项目。再在里面新建 src 文件夹和webpack.config.js 配置文件。在src 里面再新建css文件夹，img文件夹，index.js。css 文件夹 有一个style.css 放置样式，在img文件夹中放置一大一小两张图片, 小的图片1kb, 大的图片5kb. index.js 作为入口文件，npm install webpack webpack-dev-server css-loader style-loader url-loader file-loader --save-dev 来安装依赖. package.json中先写两个命令：
“scripts”: {
“build”: “webpack”,
“dev”:“webpack-dev-server”
},
最后如果本文对你有用的话欢迎你关注我的公众号，会有各种技术栈的文章
