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. Linux中gcc和g++

    今天在Linux上编写一个小的C++程序运行,需要用到iostream中cout,一开始创建一个hello.c的文件编写如下代码: #include<stdio.h> #include&l ...

  2. HDU 6069 Counting Divisors

    Counting Divisors Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Oth ...

  3. Group(), Groups(),& Groupdict()

    group() 返回一个或多个匹配的字串.如果只有一个参数,结果只有单个字符串:如果有多个参数,结果是一个元组,元组里每一项对应一个参数.没有参数,group1默认是0(整个匹配串被返回).如果gro ...

  4. transform的影响

    http://www.cnblogs.com/chuangweili/p/5167986.html transform 各种影响 1.提升元素的z-index层级,下面这个例子会让前面的图片显示在上面 ...

  5. Chrome DevTools 开发者工具 技巧 调试

    https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks   1.console面板多行输入 Shift +  ...

  6. vue初级学习--控制台创建vue项目

    一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用we ...

  7. Problem C: 求个最大值

    class MaxValue { public: vector<int> vec; void append(int n) { vec.push_back(n); } int getMax( ...

  8. python模块导入的方法与区别

    import ..   #导入整个模块 from .. import .. #导入模块中的类.函数或者变量 from .. import *  #导入模块中的所有公开成员 from .. import ...

  9. 项目实战2—LVS负载均衡

    负载均衡集群企业级应用实战-LVS 实现基于LVS负载均衡集群的电商网站架构 随着业务的发展,网站的访问量越来越大,网站访问量已经从原来的1000QPS,变为3000QPS,网站已经不堪重负,响应缓慢 ...

  10. ALTER TABLE SWITCH' statement failed. The table x' is partitioned while index 'x' is not partitioned.

    1.L_Monitoring有这么些字段,ID,Collecttime,PlateType,PlateNO以及其他一些这段.建立这个表的时候是个非分区表,其中ID是主键,并在Collecttime,P ...