补充, 在前面的服务启动执行命令中, 我们在 package.JSON 中的配置信息为:
- "scripts": {
- "server": "webpack-dev-server",
- },
该种方式在启动服务后还需自己访问相关 url, 这很不友好. 此处我们新增一些配置, 保证在我们启动服务后自动访问 url 并渲染, 配置如下:
- "scripts": {
- "server": "webpack-dev-server --open",
- },
这样就实现了服务启动浏览器也会自动打开.
正文:
在前端开发中, 我们常用 img 标签 来引入图片, 这样 webpack 在打包时又得做一些特殊处理, 此处我们通过一个插件 https://github.com/search?q=html-withimg-loader 来处理我们在 HTML 中引入图片的问题.
1. 新增一张图片
在 src/images 目录下新增一张图片, 作为等会引入到 HTML 文件中图片, 此处我的图片为 wfbin.PNG.
2. 引入图片
在 src/index.HTML 中引入:
- <div>
- <img src="images/wfbin.png"/>
- </div>
3. 插件安装
使用 NPM 进行安装, 若失败则采用 cnpm 进行安装.
NPM install HTML-withimg-loader --save-dev
4. 配置 loader
在 webpack.config.JS 文件中的 module 属性中进行配置:
- {
- test: /\.(htm|HTML)$/i,
- use:[ 'html-withimg-loader']
- }
5. 打包
使用 webpack 进行打包, 我们的图片被进行了很多好的打包.
6. 启动服务
运行命令 NPM run server 命令, 服务被启动, 浏览器自动打开, 并进行了渲染, 如下:
NPM run server
渲染效果:
记: 到此完成了 webpack 打包过程中图片的相关处理.
本节源码:
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>
- webpack
- </title>
- </head>
- <body>
- <div>
- <img src="images/wfbin.png" />
- </div>
- <div id="img">
- </div>
- <div id="title">
- </div>
- </body>
- </HTML>
- View Code
- src/index.CSS:
- body{
- background-color: #018eea;
- color: red;
- font-size: 32px;
- text-align: center;
- }
- #img{
- background-image: url(../images/webapck.jpg);
- width:271px;
- height:285px;
- }
- View Code
- webpack.config.JS:
- const path = require('path');
- const uglify = require('uglifyjs-webpack-plugin');
- const htmlPlugin= require('html-webpack-plugin');
- const extractTextPlugin = require("extract-text-webpack-plugin");
- var website ={
- publicPath:"http://localhost:1818/"
- }
- module.exports={
- // 入口文件的配置项
- entry:{
- entry:'./src/entry.js',
- // 这里我们又引入了一个入口文件
- entry2:'./src/entry2.js',
- },
- // 出口文件的配置项
- output:{
- // 输出的路径, 用了 Node 语法
- path:path.resolve(__dirname,'dist'),
- // 输出的文件名称
- filename:'[name].js',
- publicPath: website.publicPath
- },
- // 模块: 例如解读 CSS, 图片如何转换, 压缩
- module:{
- rules: [
- {
- test: /\.CSS$/,
- use: extractTextPlugin.extract({
- fallback: "style-loader",
- use: "css-loader"
- })
- },
- {
- test:/\.(PNG|jpg|gif)/,
- use:[{
- loader:'url-loader',
- options:{
- limit:50,
- outputPath:'images/'// 图片打包到 images 下
- }
- }
- ]
- },
- {
- test: /\.(htm|HTML)$/i,
- use:[ 'html-withimg-loader']
- }
- ]
- },
- // 插件, 用于生产模版和各项功能
- plugins:[
- // new uglify(),
- new htmlPlugin({
- minify:{
- removeAttributeQuotes:true
- },
- hash:true,
- template:'./src/index.html'
- }),
- new extractTextPlugin("css/index.css")
- ],
- // 配置 webpack 开发服务功能
- devServer:{
- contentBase:path.resolve(__dirname,'dist'), // 绝对路径
- host:'localhost',
- compress:true,
- port:1818
- }
- }
- View Code
- entry.JS:// 入口文件
- import CSS from './css/index.css'
- document.getElementById('title').innerHTML='Hello Webpack';
- View Code
来源: https://www.cnblogs.com/wfaceboss/p/10122803.html