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. 基于netfilter和LVM的密码窃取

    一:要求: 编写一个基于netfilter的模块,该模块的功能是捕获如mail.ustc.edu.cn等使用明文传输用户名和密码的网站的用户名和密码:并在接收到特定的ICMP数据包之后将捕获的用户名和 ...

  2. Rem与Px的转换[转载]

    原文:http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html rem是CSS3中新增加的一个单位 ...

  3. 利用echarts highcharts 实现自定义地图 关系图效果 侧边3D柱形图饼图散点图

    github 地址:  https://https://github.com/Gengshaoxuan/medataMap github 地址:  https://https://github.com ...

  4. redis数据库安装及简单的增删改查

    redis下载地址:https://github.com/MSOpenTech/redis/releases. 解压之后,运行 redis-server.exe redis.windows.conf  ...

  5. C#设计模式之十三代理模式（Proxy）【结构型】

    一.引言   今天我们要讲[结构型]设计模式的第七个模式,也是"结构型"设计模式中的最后一个模式,该模式是[代理模式],英文名称是:Proxy Pattern.还是老套路,先从名字 ...

  6. windows下 sbulime text 安装less2css踩的几个坑

    sublime 就不介绍了,less2css 是一个安装在sublime上的插件,可以让你书写less后自动生成css文件,而且还可以提示less的语法错误. 搜了一下相关的教程,很多都写的不全,按照 ...

  7. JS模块化开发----require.js

    前言 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前 ...

  8. maven下的sqlserver配置jar包

    看了两天的maven,开始把之前做的ssm项目搭建成maven项目,结果在sqlserver的依赖包上受阻,sqlserver需要sqljdbc4.jar包,经过一系列百度教程才得以解决,现在总结一下 ...

  9. apply和call的区别

    每一个javascript中的Function对象都有一个apply()方法和call()方法,他们的基本用法为: /*apply()方法*/ function.apply(thisObj[, arg ...

  10. Bean property属性说明

                                  来自为知笔记(Wiz)