安装webpack需要安装node环境，因此需要在电脑中安装node。node官网https://nodejs.org/，安装LTS版本即可。

webpck基本概念

  • entry：分析依赖模块的入口
  • output：输出配置
  • loaders：资源模块的处理器
  • plugins：实现更复杂更丰富功能的插件

下边做一个简单的小案例

1、全局安装webpack

windows用户直接执行

$ npm install webpack -g

mac用户需要在命令前加入sudo命令

$ sudo npm install webpack -g

然后mac用户输入电脑开机密码等待安装完毕

2、新建文件夹webpackStudy，然后在终端中定位到此目录，执行

$ npm init

一直按回车即可，执行完毕后会创建一个package.json文件

3、安装webpack

$ npm install webpack --save-dev

因为是开发环境所以要在最后加上--save-dev

4、新建以下文件

其中123.jpg为大于8k的文件，text.png为小于8k的文件

common.css中为

body{

    background-color: skyblue;

    font-size: 20px;

}

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>Document</title>

</head>

<body>

</body>

</html>

main.js中为

// alert('hello world')

const commonCss = require('./common.css');

const tutu = require('./img/123.jpg');

console.log(tutu)

const text = require('./img/text.png');

console.log(text);

var img = new Image();

img.src = 'dist/'+ tutu;

img.onload = function(){

    document.body.appendChild(img)

}

5、在webpack.config.js文件中输入以下内容

// 处理路径相关

const path = require('path');

// 压缩模块

const Uglifyjs = require('uglifyjs-webpack-plugin');

module.exports = {

    // 入口文件

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

    output:{

        // path.resolve把路径解析为绝对路径 __dirname是当前js的目录

        path:path.resolve(__dirname,'dist'),

        filename:'bundle.js'

    },

    // webpack4需要制定是否为开发环境

    mode:"development",

    // module配置loader等信息

    module : {

        // rules配置loader信息

        rules:[{

            // 判断如果文件是.css结尾的那么就用css-loader在处理。并不是打包所有的css而是从入口中搜集依赖

            test:/\.css$/,

            use:'css-loader'

        },{

            //打包图片文件

            test:/\.(png|jpg|gif)$/,

            use:[{

                loader:'url-loader',

                // 配置项

                options:{

                    // 当图片小于8k的时候会把图片转为base64格式

                    limit:8192

                }

            }]

        }]

    },

    plugins:[

        // 使用压缩插件

        new Uglifyjs()

    ]

}

6、安装所需依赖

$ npm install webpack-cli css-loader url-loader file-loader uglifyjs-webpack-plugin --save-dev

安装完毕后执行webpack命令

$ webpack

打包完毕后在index.html中引入bundle.js

在浏览器打开index.html即可看到大于8k的按个img文件。

至于body为什么没有边颜色，我也在摸索中。。。

webpack4简单入门的更多相关文章

  1. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  2. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  3. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  4. emacs最简单入门，只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

  5. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  6. Docker 简单入门

    Docker 简单入门 http://blog.csdn.net/samxx8/article/details/38946737

  7. Springmvc整合tiles框架简单入门示例（maven）

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  8. git简单入门

    git简单入门 标签(空格分隔): git git是作为程序员必备的技能.在这里就不去介绍版本控制和git产生的历史了. 首先看看常用的git命令: git init git add git comm ...

  9. 程序员，一起玩转GitHub版本控制，超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...

随机推荐

  1. NAT模式下设置 虚拟机linux(Centos7) 联网

    第一步 设置虚拟机网络为NAT模式 第二步 设置虚拟机网络配置 首先执行 cd /etc/sysconfig/network-scripts 之后VI 编辑 ifcfg-ens33(根据实际情况来 基 ...

  2. RABC(Role-Based Access Control) 基于角色的权限访问控制

    基于角色的权限访问控制(Role-Based Access Control),通过角色绑定权限,然后给用户划分角色.在web应用中,可以将权限理解为url,一个权限对应一个url. 使用thinkph ...

  3. thinkphp5引入百度编辑器

    在ThinkPHP的模板(html文件)中引入Ueditor  下载ueditor解压至public/static目录 在需要的页面引入js文件 <script type="text/ ...

  4. webpack前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 本人最 ...

  5. C++11随机数发生器

    前言 一直知道所谓的"随机数"都是伪随机,事实上也是满足某种规则生成的.有些程序测试时通常需要一个随机数源,但在新标准出现之前,C++都是依赖简单的C库函数rand来生成随机数的. ...

  6. Codeforces Round #129 (Div. 2) A

    Description The Little Elephant loves Ukraine very much. Most of all he loves town Rozdol (ukr. &quo ...

  7. Java文件与io——File类

    概念: File类:表示文件和目录路径名的抽象表示形式. File类可以实现文件的创建.删除.重命名.得到路径.创建时间等等,是唯一与文件本身有关的操作类. 例: public class FileD ...

  8. Java安装JDBC驱动教程(SQL Server系列）

    端口一般开放都没问题,默认设置就行,第一步下载JDBC,我自己在使用微软新的JDBC6.0的包的时候出错,后来就退回到JDBC4.0引用,完美使用. SQLJDBC4.0下载地址:点击下载 下载之后, ...

  9. 开源的SSH框架优缺点分析

    开源是3个框架共有的优点 Struts2框架(MVC框架)的优点如下: 1) 实现了MVC模式,层次结构清晰,使程序员只需关注业务逻辑的实现: 2) 丰富的标签库,大大提高了开发的效率: 3) Str ...

  10. Redis中String类型的Value最大可以容纳数据长度

    项目中使用redis存储,key-value方式,在Redis中字符串类型的Value最多可以容纳的数据长度是512M 官方信息: A String value can be at max 512 M ...