webpack学习（二)：先写几个webpack基础demo
一、先写一个简单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>
document.write('我是a.js文件'+'</br>');
document.write('我是b.js文件'+'</br>');
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>
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的更多相关文章
- WebPack 学习：从阮神的15个DEMO开始
WebPack 是什么 官方就一句话,打包所有的资源. 从阮神的 15 DEOM入手 Webpack Github 地址 阮神GIT 按照 ReadME 操作 npm webpack-dev-serv ...
- Webpack学习笔记一：What is webpack
#,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...
- 前端小白webpack学习（二）
前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...
- 深入学习webpack（二）
深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...
- webpack学习笔记（二）-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack学习（二）
时下很火的react项目多用到webpack+ES6,本文只实践webpack的打包功能,不涉及react. 1.新建项目 新建的项目,命令模式下切换到项目根路径,用npm init命令生成packa ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- Webpack学习-Webpack初识
一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...
- webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
随机推荐
- 编写服务器程序时遇到的connect：no route to host的问题
亲测,,ftp服务器:在一台虚拟机上,没有问题.但是在不同的计算机或虚拟机上就会出现这种错误提示.一般是linux防火墙的问题 解决方法: 关闭linux防火墙 在root账户下 命令行:servic ...
- jQuery源码研究——解决命名冲突
在项目中难免不去使用多个插件,如此一来这些插件就有可能出现一样的名称,当出现同名变量时后一个将会覆盖上一个,这样的话我们就无法同时使用多个插件了. 当遇到这种情况我们可以手动去修改插件源码把它的名字改 ...
- [Python Study Notes]cpu信息
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- [SCOI2009][bzoj1025]游戏
[SCOI2009][bzoj1025]游戏 标签: DP 置换 题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1025 题解 很套路的题目 ...
- 利用ajax获取网页表单数据，并存储到数据库之二（使用SSH）
上篇介绍了如何使用JDBC链接ORACLE数据库实现对数据库的增删改查,本例是使用框架SSH来对数据库的数据进行操作. 首先说框架,现在流行的框架很多,如Struts.Hibernate.Spring ...
- eclipse快捷注释生成方法
自动生成方法的注释格式,例如 /*** @param str* @return* @throws ParseException*/ 快捷键是alt+shift+j,将光标放在方法名上,按快捷键.会生成 ...
- EntityFramework Core 2.0自定义标量函数两种方式
前言 上一节我们讲完原始查询如何防止SQL注入问题同时并提供了几种方式.本节我们继续来讲讲EF Core 2.0中的新特性自定义标量函数. 自定义标量函数两种方式 在EF Core 2.0中我们可以将 ...
- springmvc+mybatis+mysql 数据库插入中文是乱码
java web项目,前台页面的表单数据,插入到数据库时,结果出现乱码"???"的问题,断断续续折腾了一天时间,废话不说,步骤如下: 一:在web.xml中配置:编码格式拦截器 & ...
- C语言队列（数组内核）
#include <stdio.h>#include <stdbool.h>#include <stdlib.h>struct Queue{ int *pBase; ...
- C语言_结构体的4种定义初始化方式及案例
结构体是一种构造数据类型 (构造数据类型:数组类型.结构体类型(struct).共用体类型(union)).用途:把不同类型的数据组合成一个整体,通俗讲就像是打包封装,把一些有共同特征(比如同属于某一 ...