webpack学习笔记(一)
来源:互联网 发布:手机必备软件大全 编辑:程序博客网 时间:2024/06/09 22:15
Webpack学习笔记
安装Webpack
因为webpack是在Node.js下运行的,所以,首先要确认电脑支持node.js
然后使用npm安装webpack
npm install webpack -g
创建项目
创建工作目录,或者cd到工作目录下
mkdir myWorkSpace
单js文件打包
cd到工作目录的js目录下,创建我们的js文件,并在其中写入自己要执行的代码
然后我们在HTML引入bondle.js文件
再去命名行中使用webpack打包
webpack youJs.js bondle.js
就可以打包成功了,当然bondle.js名字是你自己指定的,没有硬性要求,根据自己的项目需求命名就可以了
多js文件打包
我们可以根据自己的项目需求写js文件,最后我们新建一个js文件,我们可以先称之为main.js文件,在main.js文件中,我们可以这么写
require('你要引用的js路径');require('另一个你要引用的js路径');......require('你引用 的js路径');
最后,我们再到命令行中使用webpack打包
webpack main.js bondle.js
最后在HTML中引用bondle.js就可以愉快的玩耍了
LOADER
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
使用命令来安装css-loader style-loader
npm install css-loaer style-loader -g
完成上述步骤之后,我们以后再写main.js文件时,就需要在最上面加上
require('@style!css!thePahtOfYouOwnStyleFile');
然后我们再使用webpack命令来打包
webpack main.js bondle.js
配置文件
webpack的编译选项其实有很多,我们不可能每次都在命令行中输入一遍,所以喽,为了进行统一管理,一般都在根目录下创建webpack.config.js文件,对文件内容进行编写,从而达到统一管理的目的
一般我们这么编写webpack.config.js
module.exports = { entry:'./main.js', output:{ path:'theDirNameYouWangToOutput', filename:'bundle.js' }, module:{ loaders:[ {test:/\.css$/,loader:'style!css'} ] }}
编写了webpack.config.js之后,我们就可以在项目的根目录下执行webpack
webpack
就新鲜打包出来了
- webpack学习笔记一
- webpack学习笔记(一)
- webpack学习笔记一
- webpack学习笔记(一)
- webpack使用笔记(一)
- Webpack学习(一)
- webpack学习笔记
- webpack学习笔记
- webpack学习笔记<使用>
- Webpack 学习笔记
- webpack学习笔记
- webpack 学习笔记
- webpack入门学习笔记
- webpack学习笔记
- 【转】webpack学习笔记
- webpack 学习笔记
- Webpack学习笔记
- webpack学习笔记
- 十进制转二进制(最简代码)
- 微信小程序开发—(二)轮播图
- hdu 1124 (n! 中素数p的个数的应用)
- [笔记]前端
- Noj
- webpack学习笔记(一)
- ReentrantLock 重入锁
- c++版矩阵基本操作,行列式,逆(不限矩阵大小)
- 关于String的常见问题
- 导出excel
- MySQL服务器的连接数设置
- WebView加载网页基本配置
- Android studio 安装 opencv-Android环境搭建
- 利用模板实现Stack