一、先写一个简单demo1

1-1安装好webpack后创建这样一个目录：

1-2:向src各文件和dist/index.html文件写入内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>webpack</title>

</head>

<body>

    <div>测试webpack</div>

</body>

</html>

<script src="bundle.js"></script>
a.js内容：
document.write('我是a.js文件'+'</br>');
b.js内容：
document.write('我是b.js文件'+'</br>');
main.js内容：
require('./a');

require('./b');

document.write('我是main.js,我require了a.js文件和b.js文件');

1-3向webpack.config.js中写入内容：

module.exports = {

    entry: "./src/js/main.js",　　　　//模块的入口文件

    output: {

        filename: "bundle.js",      //打包后输出文件的文件名

        path: __dirname + '/dist'   //打包后的文件存放的地方;注："__dirname"是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

    }

};

1- 4 接下来，在终端进入目录，写入webpack回车

js下的三个文件都被打包好了，再回来看看我们的目录,多了一个dist/bundle.js的文件！

运行结果：

一张图解：

二、写一个多入口文件demo2

2-1安装好webpack后创建这样一个目录：

2-2:向src各文件和dist/index.html文件写入内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>webpack</title>

</head>

<body>

    <div>测试webpack</div>

</body>

</html>
<script src="main.js"></script>
<script src="main1.js"></script>
c.js  d.js  main1.js 和 a.js  b.js  main.js结构上完全一致，只是输出的文本不同，这里不多赘述。

2-3向webpack.config.js中写入内容：

module.exports = {
    entry: {
        main : './src/js/main.js',
        main1 : './src/js/main1.js'
    },
    output: {
        filename: "[name].js",　　//这里的name是占位符[name]分别对应entry中写入的[main]和[main1],这表示，在dist下生成的是main.js和main1.js两个JS文件
　　　　 path: __dirname + '/dist'
    }
};

2- 4 接下来，在终端进入目录，写入webpack回车

js下的三个文件都被打包好了，再回来看看我们的目录,多了两个dist/main.js、dist/main1.js的文件！

运行结果：

一张图解：

三、写一个引入css的demo3

3-1安装好webpack后创建这样一个目录：

3-2:向src各文件和dist/index.html文件写入内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>webpack</title>

</head>

<body>

    <div class="test">测试webpack</div>

</body>

</html>

<script src="bundle.js"></script>

main.css

.test{

    color: red;

}

main.js

require('./a');

require('./b');

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

document.write('我是main.js,我require了a.js文件和b.js文件'+'</br>');

3-3向webpack.config.js中写入内容：

module.exports = {

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

    output: {

        filename: "bundle.js",

        path: __dirname + '/dist'

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: 'style-loader!css-loader' }   //.css 文件使用 style-loader 和 css-loader 来处理.

        ]

    }

};

3- 4 接下来，在终端进入目录，先执行npm install style-loader --save-dev 和 npm install css-loader --save-dev 安装，然后写入webpack回车

js下的三个文件都被打包好了，再回来看看我们的目录,只多了一个dist/bundle.js的文件。但是css这时候是生效了的。

运行结果：

四、写一个打包图片的demo4

打包图片有三种，html中的图片，css中的图片，js中的图片，这里只简写一个css中的图片。

 4-1安装好webpack后创建这样一个目录：

4-2:向src各文件和dist/index.html文件写入内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>webpack</title>

</head>

<body>

    <div class="test">测试webpack</div>

</body>

</html>

<script src="bundle.js"></script>

main.css

.test{

    color: red;

    width: 150px;

    height: 100px;

    background: url("../image/1.jpg");

}

js文件和上面一样，就不赘述了。

4-3向webpack.config.js中写入内容：

module.exports = {

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

    output: {

        filename: "bundle.js",

        path: __dirname + '/dist'

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: 'style-loader!css-loader' },  //.css 文件使用 style-loader 和 css-loader 来处理.

            { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=8192'} //图片文件使用 url-loader 来处理，小于8kb的直接转为base64

        ]

    }

};

4- 4 接下来，在终端进入目录，先执行npm install url-loader --save-dev 和 npm install file-loader --save-dev 安装，然后写入webpack回车

js下的三个文件都被打包好了，再回来看看我们的目录,多了一个dist/bundle.js的文件和一个被打包好的图片文件。

运行结果：

webpack学习（二)：先写几个webpack基础demo的更多相关文章

  1. WebPack 学习：从阮神的15个DEMO开始

    WebPack 是什么 官方就一句话,打包所有的资源. 从阮神的 15 DEOM入手 Webpack Github 地址 阮神GIT 按照 ReadME 操作 npm webpack-dev-serv ...

  2. Webpack学习笔记一：What is webpack

      #,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...

  3. 前端小白webpack学习（二）

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  4. 深入学习webpack（二）

    深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...

  5. webpack学习笔记（二）-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  6. webpack学习（二）

    时下很火的react项目多用到webpack+ES6,本文只实践webpack的打包功能,不涉及react. 1.新建项目 新建的项目,命令模式下切换到项目根路径,用npm init命令生成packa ...

  7. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  8. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  9. webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

随机推荐

  1. js处理json js递归

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  2. [Python Study Notes]CS架构远程访问获取信息--SERVER端v2.0

    更新内容: 1.增加内存信息获取 2.增加电池信息获取 3.增加磁盘信息获取 4.重新布局窗体 5.增加窗体名称 6.增加连接成功之前,不可按压 ''''''''''''''''''''''''''' ...

  3. 阿里云 virtual memory exhausted: 无法分配内存

    在阿里云买了个云服务器,内存1G.编译php时出现下面的错误: virtual memory exhausted: Cannot allocate memory 问题原因:由于物理内存本身很小,且阿里 ...

  4. Git 如何 clone 非 master 分支的代码

    问题描述 我们每次使用命令 git clone git@gitlab.xxx.com:xxxxx.git 默认 clone 的是这个仓库的 master 分支.如果最新的代码不在 master 分支上 ...

  5. Treap-平衡树学习笔记

    平衡树-Treap学习笔记 最近刚学了Treap 发现这种数据结构真的是--妙啊妙啊~~ 咳咳.... 所以发一发博客,也是为了加深蒟蒻自己的理解 顺便帮助一下各位小伙伴们 切入正题 Treap的结构 ...

  6. Hibernate自动生成实体类注解（转）

    常用的hibernate annotation标签如下: @Entity --注释声明该类为持久类.将一个Javabean类声明为一 个实体的数据库表映射类,最好实现序列化.此时,默认情况下,所有的类 ...

  7. Python数据结构之四——set（集合）

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 经过几天的回顾和学习,我终于把Python 3.x中的基础知识介绍好啦.下面将要继续什么呢?让我想想先~~~嗯,还是 ...

  8. html5版 音乐播放器

    html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...

  9. poj 2230详解

    题目链接 : poj2230 大致题意: 有一个人每晚要检查牛场,牛场内有m条路,他担心会有遗漏,就每条路检查两次,且每次的方向不同,要求你打印他行走的路径(必须从1开始),打印一条即可. 思路分析 ...

  10. nodejs爬虫初试---superagent和cheerio

    前言 早就听过爬虫,这几天开始学习nodejs,写了个爬虫 demo ,爬取 博客园首页的文章标题.用户名.阅读数.推荐数和用户头像,现做个小总结. 使用到这几个点: 1.node的核心模块-- 文件 ...