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. 一台服务部署多个tomcat注意事项

    第一步  添加tomcat环境变量 # vim /etc/profile加入下代码 # TOMCAT ATALINA_BASE=/usr/local/tomcat8CATALINA_HOME=/usr ...

  2. Windows环境下多线程编程原理与应用读书笔记（2）————面向对象技术

    面向对象技术是学C++需要重点掌握的知识,因为我觉得自己的基础还是比较可以,这一章节的内容就只是粗略的读了一遍,在此就不做过多的笔记.

  3. 判断回文数字 9. Palindrome Number

    Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...

  4. 【转载】SQL注入

             "SQL注入"是一种利用未过滤/未审核用户输入的攻击方法("缓存溢出"和这个不同),意思就是让应用运行本不应该运行的SQL代码.如果应用毫无防 ...

  5. 常用meta整理[转载]

    < meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web ...

  6. RobotFramework自动化测试框架-移动手机自动化测试Get Element Location关键字的使用

    Get Element Location关键字用来获取一个Element的Location位置,该关键字接收一个参数[ locator ] 示例1:使用Get Element Location来获取一 ...

  7. 第三方软件内嵌IE出现纵向滚动条消失的BUG，奇葩的IE BUG 真是无奇不有

    混了这么久 竟然还有这样难以解决的BUG,最后都跑到英文的MSDN上提问了,因为谷歌都谷不出朕的忧伤了,有木有. 提问原文如下:https://social.msdn.microsoft.com/Fo ...

  8. day2--SecureCRT的配置

    生产中,我们是看不到虚拟机的工作界面,虚拟机的界面相当于机房显示屏的样子,实际上我们是在操作工具里面进行管理,这里使用SecureCRT远程连接虚拟机,SecureCRT的设置如下: 1.打开Secu ...

  9. 前端基于react,后端基于.net core2.0的开发之路（1） 介绍

    文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数 ...

  10. Java 核心内容相关面试题【2】

    第一,谈谈final, finally, finalize的区别. final?修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 ...