webpack学习(二):先写几个webpack基础demo
2018-03-10 12:02
531 查看
一、先写一个简单demo1
1-1安装好webpack后创建这样一个目录:
1-2:向src各文件和dist/index.html文件写入内容:
a.js内容:
b.js内容:
main.js内容:
1-3向webpack.config.js中写入内容:
1- 4 接下来,在终端进入目录,写入webpack回车
js下的三个文件都被打包好了,再回来看看我们的目录,多了一个dist/bundle.js的文件!
运行结果:
一张图解:
二、写一个[b]多入口文件demo2[/b]
2-1安装好webpack后创建这样一个目录:
2-2:向src各文件和dist/index.html文件写入内容:
c.js d.js main1.js 和 a.js b.js main.js结构上完全一致,只是输出的文本不同,这里不多赘述。
2-3向webpack.config.js中写入内容:
2- 4 接下来,在终端进入目录,写入webpack回车
js下的三个文件都被打包好了,再回来看看我们的目录,多了两个dist/main.js、dist/main1.js的文件!
运行结果:
一张图解:
三、写一个引入css的demo3
3-1安装好webpack后创建这样一个目录:
3-2:向src各文件和dist/index.html文件写入内容:
main.css
main.js
3-3向webpack.config.js中写入内容:
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[b]-1安装好webpack后创建这样一个目录:[/b]
4-2:向src各文件和dist/index.html文件写入内容:
main.css
js文件和上面一样,就不赘述了。
4-3向webpack.config.js中写入内容:
4- 4 接下来,在终端进入目录,先执行npm install url-loader --save-dev 和 npm install file-loader --save-dev 安装,然后写入webpack回车
js下的三个文件都被打包好了,再回来看看我们的目录,多了一个dist/bundle.js的文件和一个被打包好的图片文件。
运行结果:
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的文件!
运行结果:
一张图解:
二、写一个[b]多入口文件demo2[/b]
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[b]-1安装好webpack后创建这样一个目录:[/b]
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的文件和一个被打包好的图片文件。
运行结果:
相关文章推荐
- js学习笔记:webpack基础入门(一)
- 学习 webpack,并构建一个超简单的 demo
- js学习笔记:webpack基础入门(一)
- webpack之基础学习
- 建议ASP.NET Web开发新手学习的几个基础框架
- Webpack 基础学习
- webpack学习笔记(一)从零开始构建基础webpack项目
- webpack 3.0+基础学习
- node+webpack环境搭建 vue.js 2.0 基础学习笔记
- webpack 学习总结demo
- Web学习第一天:Servlet+JSP简单Demo
- web页面化工作的前期基础学习(五)——HTML布局
- box2dweb的学习测试demo
- webpack基础入门(一)
- webpack学习链接
- 学习React-Native(一):学习React,使用模块加载器webpack
- webpack学习笔记
- webpack 基础入门
- react基础学习小demo汇总
- Javaweb、javaEE学习笔记基础知识