webpack工程化实战day3

一线蓝光
144 阅读4分钟

图片/字体文件处理

  1. 图片
  • url-loader
  • file-loader

url-loadeer和file-loader都可以用来处理本地的资源文件，如图片、字体、音视频等。功能也类似。url-loader可以指定在文件大小小于指定的限制时，返回DataURL,不会输出真实的文件，可以减少昂贵的网络请求。

#安装
npm install url-loader file-loader -D

#入口文件
import pic from './logo.png'
var img = new Image()
img.src = pic
img.classList.add('logo')

var root = document.getElementById('root')
root.append(img)

# 使用
在webpack.config.js文件，modules中的rules配置：
module.exports = {
	modules: {
    	rules: [
          {
          	test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
            use: [
            	{
                	loader: 'url-loader', //仅配置url-loader即可，内部会自动调用file-loader
                    options: {
                    	limit: 10240, // 小于此值的文件会被转换成DataURL
                        name:'[name]_[hash:6].[ext]', // 设置输出文件的名字
                        outputPath: 'assets', // 设置资源输出的目录
                    }
            	}
            ]，
            exclude: /node_modules/
          }
        ]
    }
}

注意：limit要设置合理,太大会导致JS文件加载变慢，需要兼顾加载速度和网络请求次数。如果需要使用图片压缩功能，可以使用image-webpack-loader

  1. 处理字体 iconfont
// css
@font-face{
	font-family: "webfont",
    font-display: swap;
    src: url("webfont.woff2") format("woff2")
}
body {
	background: blud;
    font--family: "webfont" !important;
}
// webapck.config.js
{
	test: /\.(eot|ttf|woff|woff2|svg)$/,
    use: "file-loader"
}

html页面处理

  1. htmlWebpackPlugin

htmlWebpackPlugin插件会在打包结束后，自动生成一个html文件，并把打包生成的js模版引入到该html中。

npm install --save-dev html-webpack-plugin

配置：
title: 用来生成页面的title元素
filename: 输出的HTML文件名，默认是index.html,也可以直接配置带有子目录。
template: 模版文件路径，支持加载器 比如：html!./index.html
inject: true| 'heade' | 'body' | false 注入所有的资源到特定的template或者templateContent中，如果设置为true或者body，所有的javascript资源将被放置到body元素的底部，'head'将放置到head元素中。
favicon：添加特定的favicon路径输出到HTML文件中
minify: {} | false 传递html-minifier选项给minify输出
hash: true | false 如果为true，将添加一个唯一的webpack编译hash到所有包含的脚本和css文件，对于解除cache很有用
cache: true | false 如果为true，这是默认值，这是默认值，仅仅在文件修改之后才会发布文件
showErrors: true | false 如果为true，这是默认值，错误信息会写入到HTML页面中
chunks: 允许只添加某些块(比如,仅仅 unit test块)
chunksSortMode： 允许控制块在添加到页面之前的排序方式，支持的值 'none'|'default'|{function}-default: 'auto'
excludeChunks:允许跳过某些块(比如,跳过单元测试的块)

案例

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	...
    plugins: [
    	new htmlWebpackPlugin({
        	title: 'my app',
            filename: 'app.html',
            template: './src/index.html'
        })
    ]
}

// index.html
<!DOCTYPE html>
<html lang="en">
   <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
   <div id="root"></div>
   </body>
 </html>
  1. clean-webpack-plugin
npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
...

plugins: [
	new CleanWebpackPlugin()
]

clean-webpack-plugin:如何做到dist目录下某个文件或目录不被清空：使用配追项：cleanOnceBeforeBuildPatterns案例:cleanOnceBeforeBuildPatterns:["/*","!dll","!dll/"],!感叹号相当于exclude排除，意思是清空操作排除dll目录，和dll目录下所有文件/注意:数组列表里的"*/"是默认值，不可忽略，否则不做清空操作。

sourceMap

源代码与打包后的代码的映射关系，通过sourceMap定位到源代码 在dev模式中，默认开启，关闭的话，可以在配置文件里

devtool: 'none'

devtool介绍：webpack.js.org/configurati…

  • eval:速度最快，使用eval包裹模块代码
  • source-map:产生.map文件
  • cheap: 较快，不包含列信息
  • Module: 第三方模块，包含loader的sourcemap(比如jsx to js,babel的sourcemap)
  • inline: 将.map作为DataURL潜入，不单独生成.map文件

配置推荐

devtool: "cheap-module-eval-source-map", //开发环境配置
// 线上不推荐开启
devtool:"cheap-module-source-map" // 线上生成配置

WebpackDevServer

提升开发效率的利器

每次改完代码都需要重新打包一次，打开浏览器，刷新一次，可以安装使用webpackdevserver来改善这块的体验

# 安装
npm install webpack-dev-server@3.11.0 -D

# 配置
修改package.json 
"script": {
	"server": "webpack-dev-server"
}

在webpack.config.js配置
devServer: {
	contentBase: './dist',
    open: true,
    port: 8081
}

# 启动
npm run server

启动服务后，发现dist目录没有了，这是因为devServer把打包后的模块不会放在dist目录下，而是放到内存中，从而提升速度

本地mock，解决跨域

联调期间，前后端分离，直接获取数据会跨域，上线后使用ngnix转发，开发期间，webpack可以处理这件事

启动一个服务器，mock一个接口
// npm i express -D
// 创建一个server.js
// 修改package.json 
scripts中添加 "server": "node server.js"

// server.js
const express = require('express')
const app = express()

app.get('/api/info', (req,res)=> {
	res.json({
    	name: '一线蓝光',
        age: '20',
        msg:'Hello World'
    })
})

app.listen('9092')

// node server.js
访问 http://localhost:9092/api/info

安装axios

// npm i axios -D
// index.js

import axios from 'axios'
axios.get('http://localhost:9092/api/info').then(res=>{
	console.log(res)
})

会有跨域问题

修改webpack.config.js设置服务器代理
proxy: {
	"/api": {
    	target: "http://localhost:9092"
    }
}

修改index.js
axios.get('/api/info').then(res=> {
	console.log(res)
})
avatar
文章
阅读
粉丝