webpack的一些简单操作

来源:互联网 发布:淘宝双十一数据统计 编辑:程序博客网 时间:2024/05/18 01:06

前提
安装一个全局的 webpack
npm install webpack -g

1.打包单个js文件

webpack 入口文件 输出文件

步骤
1.首先在当前文件目录下创建两个子文件夹:dist和src(这两个文件夹名字随意)
2.在src文件夹下创建一个js文件(例如index.js)
3.在dist目录下创建一个html文件
4.打开终端 输入 webpack ./src/index.js ./dist/bundle.js
5.在html文件里引入bundle.js文件
6.打包结束,运行html文件

2.打包多个具有依赖的关系的js文件

步骤
1.前面1,2,3步骤同打包单个js文件
2.在src文件下再创建一个demo.js,用module.exports导出文件
3.在index文件里定义一个变量接收require(‘./demo.js’)导出的值
4.剩下的步骤同打包单个js文件

3.打包.css结尾的文件

步骤
1.前面1,2,3步骤同打包单个js文件
2.在src文件下创建一个css文件,用require(‘!style-loader!css-loader!./index.css’)导入到index.js文件
3.npm install css-loader style-loader
4.剩下的步骤同打包单个js文件

本博客旨在供自己学习
参考文献webpack

原创粉丝点击