一、先写一个简单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. AMDP + XSLX Workbench 报表开发模式

    本文介绍了我和同事通过使用AMDP + XSLX Workbench缩短报表开发周期.分离数据查询处理逻辑和前端展示工作的经验.欢迎讨论. 前言 最近接到了一套人力资源报表的开发需求,需要以EXCEL ...

  2. 正负样本比率失衡SMOTE

    正负样本比率失衡SMOTE [TOC] 背景 这几天测试天池的优惠券预测数据在dnn上面会不会比集成树有较好的效果,但是正负样本差距太大,而处理这种情况的一般有欠抽样和过抽样,这里主要讲过抽样,过抽样 ...

  3. Android App 压力测试方法(Monkey)

    一.为什么要开展压力测试 a.提高产品的稳定性:b.提高产品的留存率 二.什么时候开展压力测试 a.首轮功能测试通过后:b.下班后的夜间进行 三.7个基础知识(理论部分) 3.1 手动测试场景与自动测 ...

  4. php 链接mysql的三种方式对比

    PHP连接Mysql的三种方式: 1.原生的连接方式  原生的连接方式是面向过程的写法 <?php $host = 'localhost'; $database = 'test'; $usern ...

  5. 分布式高性能消息处理中心HPMessageCenter

    # HPMessageCenter 高性能消息分发中心.用户只需写好restful接口,在portal里面配置消息的处理地址,消息消费者就会自动访问相关接口,完成消息任务. ### 部署说明 **创建 ...

  6. acm水题3个:1.求最大公约数;2.水仙花数;3.判断完数

    //7.求两个整数的最大公约数#include<stdio.h>//用穷举法求出最大公约数int gcd1(int m,int n){ int min = m > n ? n : m ...

  7. Git版本回退和撤销修改的区别

    在阅读廖雪峰git教程时,对版本回退和暂存区撤销修改没太看懂,所以自己测试了一下. 版本回退: git reset --hard HEAD 这个命令用于版本回退,就是将已提交的版本覆盖本地工作区的内容 ...

  8. CodeForces - 788B Weird journey 欧拉路

    题意:给定n个点,m条边,问能否找到多少条符合条件的路径.需要满足的条件:1.经过m-2条边两次,剩下两条边1次  2.任何两条路的终点和起点不能相同. 欧拉路的条件:存在两个或者0个奇度顶点. 思路 ...

  9. chrome使用Timeline做性能分析

    使用Timeline做性能分析 Timeline面板记录和分析了web应用运行时的所有活动情况,这是研究和查找性能问题的最佳途径.###Timeline面板概览 Timeline面板主要有三个部分构成 ...

  10. java:替换字符串中的ASCII码

    可对照查看网盘ASCII表http://yunpan.cn/cyxg4wQjQaGEQ (提取码:8b29) public static void main(String[] args) { // / ...