1. 在img文件夹下随便找一个小一点的图片放进去.

2.修改entry.js

require('../css/index.css');

var demo1 = require('../js/demo1.js');

var demo2 = require('../js/demo2.js');

    demo1.init();

    demo2.init();

var oImg = new Image();

oImg.src = require('../img/1.gif');//当成模块引入图片

document.body.appendChild(oImg);

由于我们引入的是静态资源, 在webpack.config.js中修改一下

module.exports = {

        entry :  './src/js/entry.js',

        output : {

            filename : 'index.js',

            publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误

            path : __dirname + '/out'

        },

        module : {

            rules: [

                {test: /.js$/, use: ['babel-loader']},

                {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/

                //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/

                {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/

                {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/

            ]

        },

}

自己webpack看看效果

webpack服务器

首先先定位目录输入命令 npm install webpack-dev-server -g 
, 修改webpack.config.js文件

publicPath: 'http://localhost:8080/out',

html文件所引用的目录也要更改:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>text</title>

     <link rel="stylesheet" href="http://localhost:8080/out/index.css">

</head>

<body>

    <a href="http://localhost:8080/index2.html"></a>

    <div class="demo1"></div>

    <div class="demo2"></div>

    <script src="http://localhost:8080/out/common.js"></script>

    <script src="http://localhost:8080/out/index.js"></script>

</body>

</html>

webpack-dev-server一下看看效果

原文出自http://blog.csdn.net/c_kite/article/details/71279853

webpack 图片的打包的更多相关文章

  1. webpack 图片没打包成功

    webpack 图片打包: 直接src引用的 src='../../logo.png,webpack不会进行打包 作为背景图片的,打包成功了 解决(react 写法): 1.import 方法(推荐) ...

  2. webpack图片的路径与打包

    转的http://www.cnblogs.com/ghost-xyx/p/5812902.html 今天写 react遇到打包图片,之前都是通过url在css里,没遇到问题,今天在 react里直接用 ...

  3. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  4. webpack快速入门——打包后如何调试

    在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...

  5. webpack使用来打包前端代码

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  6. webpack原理探究 && 打包优化

    在做vue项目和react项目时,都用到了webpack.webpack帮助我们很好地提高了工作效率,但是一直以来没有对其原理进行探究,略有遗憾. 因为使用一个工具,能够深入了解其原理才能更好地使用. ...

  7. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  8. webpack react 单独打包 CSS

    webpack react 单独打包 CSS webpack require css的方法，默认会把css 打入到js文件中，加载顺序有问题，如果需要打出独立的css文件 操作步骤： step1: 安 ...

  9. webpack实现模块化打包

    webpack打包应用和实现 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 webpack.config.js 3 ...

随机推荐

  1. 2016-2017 ACM-ICPC, Asia Tsukuba Regional Contest D Hidden Anagrams

    题目链接:http://codeforces.com/gym/101158/attachments /* * @Author: lyucheng * @Date: 2017-10-21 12:20:0 ...

  2. Hive中常用的查询命令

    日志数据的统计处理在这里反倒没有什么特别之处,就是一些 SQL 语句而已,也没有什么高深的技巧,不过还是列举一些语句示例,以示 hive 处理数据的方便之处,并展示 hive 的一些用法. a)    ...

  3. 【DG】利用闪回数据库（flashback）修复Failover后的DG环境

    利用闪回数据库(flashback)修复Failover后的DG环境 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能, ...

  4. 使用NPOI导出导入导出Excel

    Excel2003 #region Excel2003 /// <summary> /// 将Excel文件中的数据读出到DataTable中(xls) /// </summary& ...

  5. redis源码分析之事务Transaction（上）

    这周学习了一下redis事务功能的实现原理,本来是想用一篇文章进行总结的,写完以后发现这块内容比较多,而且多个命令之间又互相依赖,放在一篇文章里一方面篇幅会比较大,另一方面文章组织结构会比较乱,不容易 ...

  6. java面试扫盲：对象初始化顺序(真的未必能答对)

    记录下面试里面遇到的一些java盲区,一方面扫描自己的知识盲区,一方面也可以给后面面试的朋友一些警示,以免面试的时候出现不知道的尴尬情况. 提出问题:父类静态属性,父类属性,父类构造方法,子类静态属性 ...

  7. [转载] zookeeper工作原理、安装配置、工具命令简介

    转载自http://www.cnblogs.com/kunpengit/p/4045334.html 1 Zookeeper简介Zookeeper 是分布式服务框架,主要是用来解决分布式应用中经常遇到 ...

  8. [转载] HDFS简介

    转载自http://www.csdn.net/article/2010-11-26/282582 http://subject.csdn.net/hadoop/ 一.HDFS的基本概念 1.1.数据块 ...

  9. 浅谈Verilog HDL代码编写风格

    消失了好久,没有写文章,也没有做笔记,因为最近再赶一个比赛,时间很紧,昨天周六终于结束了,所以趁着周末这会儿有时间,写点东西,记录下来.首先我学习FPGA才一年多,我知道自己没有资格谈论一些比较深层次 ...

  10. 表字符集latin1，client如何查看中文字符

    表结构如下: . row *************************** Table: my_data_7e Create Table: CREATE TABLE `my_data_7e` ( ...