初识 Webpack (七) 其他配置(制定css、js添加域名，解析html中的image，跨域、devtool定位css和js异常位置、clean插件、图标等)

目录

 

◆ 打包图片处理

3个文件基础直接跳转至此操作：

3个文件操作结束

◆ 打包css和image分别指定文件夹（）

◆ 访问图片时加上域名

◆ 代理服务器

◆ webpack其他属性（跨域）

◆ devtool配置（定位异常）

文章

前言

内容

✔ 生产环境 js 定位异常位置

✔ 生产环境 css 定位异常位置

◆ clean-webpack-plugin（插件）

遇到的问题：CleanWebpackPlugin is not a constructor 

➫ 不添加CleanWebpackPlugin（[hash].js）

◆ 加载字体图标

◆ copy-webpack-plugin

➫ 图标处理打包总结

➫ 图标处理打包实战（重点）

➫ 图bannerPlugin内置（xxx归谁版权所有）

---

• ◆ 打包图片处理

       

本篇文章基础是在​​​​ jquery，如果没有安装，请先安装！！

1. 0 项目层级

1. 1 打包样式中的图片，需要安装loader，style-loader css-loader file-loader

□ jquery如果没安装，请先安装
npm install jquery

-----------------------------------------------------------------------------
➊ 依赖安装
✔ -- npm config set registry https://registry.npm.taobao.org
✔ -- npm install webpack --save-dev
✔ -- npm install style-loader --save-dev
✔ -- npm install css-loader --save-dev
✔ -- npm install file-loader --save-dev


✔ 必须执行 --npm install html-webpack-plugin --save-dev



-----------------------------------------------------------------------------
➋ 基本配置搭建
<!--webpack.config.js-->
var HtmlWebpackPlugin = require('html-webpack-plugin')
 
module.exports = {
	entry: __dirname + "/app/main.js",
	output: {
		path: __dirname + "/public",
		filename: "bundle.js"
	},
	plugins: [
		new HtmlWebpackPlugin()
	]
}


<!--main.js-->
var $ = require("jquery");
 
require("./css/style.css");
document.write("<h1>标题<p id='hello'>Hello World</p></h1>");


<!--style.css-->
body{
    background:url('https://pics6.baidu.com/feed/9f510fb30f2442a7849bb8b12f58b04dd113022a.jpeg?token=62a4c92c568833b57bfe97993524539b&s=EF000F8D0000E4F40609F9B40300E081') no-repeat;
}

<!--
或者建议用这个，因为下一个案例启动如果用网页图片，会报403

body{
    background:url(./1.jpg) no-repeat;
}
-->

-----------------------------------------------------------------------------
➌ 执行打包看是否有错误
webpack

1. 2 配置内容

你也可以利用百度网盘代码直接写下面内容，已经提供好前提环境，如果怕麻烦就执行上面自己创建3个文件的基础上操作，3个文件基础直接跳转至此操作：

链接：https://pan.baidu.com/s/17JtrBDGiLqqbUqmtmVI23Q 
提取码：n5k7

1. index.html
2. main.js 

// 要用require语法才会打包进来
import icon from './image.png';
console.log(icon); 

let images = new Image();
images.src = icon;
document.body.appendChild(images);
// error:需要合适的loader去解析[file-loader]-> npm install file-loader -D
/**
 * (一)npm install file-loader -D
 * file-loader会在内部生成一张图片,到public目录下面,把生成图片的名字返回回来
 * (二)webpack正则匹配
 */

import './index.css';

3、 index.css

body {
	background: red;
	/* transform: rotate(45deg); */
	/* 旋转45度 */
}

div {
	width: 1753px;
	height: 557px;
	background: url('./image.png');
}

 效果图

上述希望index.html死路径的logo也变成活的红色部分，其也需要一个loader，中国人写的html-withimg-loader，专门解析我们的html，去编译我们的图片！！

npm install html-withimg-loader -D

新增html的解析

遇到的问题：新增了上述对于html图片解析之后，但是打包失败，页面也没有数据，解决办法

答：参考文章https://segmentfault.com/q/1010000021251426?utm_source=tag-newest

            // 解析html的image
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            },
            // 解析图片地址
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        esModule: false,
                    },
                }]
            },

...    
           {
				test: /\.html$/,
				use: 'html-withimg-loader'
			},
...

效果图：

注意：test可以是如下

3个文件基础直接跳转至此操作：

/\.(jpg|png|gif)&/

 

或写成

...
           {
				test: /\.(png|jpg|gif)$/,
				use: 'file-loader'
			},
...

 

var HtmlWebpackPlugin = require('html-webpack-plugin')
 
module.exports = {
	entry: __dirname + "/app/main.js",
	output: {
		path: __dirname + "/public",
		chunkFilename:'hash',
		filename: "[name].js"
	},
	module: {
		rules: [{
			// test: /\.jpg$/,
			test: /\.(jpg|png|gif)&/,
			use: {loader:'file-loader'}
		},{
			test:/\.css$/,
			use:["style-loader","css-loader"]
		}]
	},
	plugins: [
		new HtmlWebpackPlugin()
	]
}

 

1. 3 效果（可以正常解析图片和打包处理）

    （可放大）

3个文件操作结束

---