Webpack 使用(二)
来源:互联网 发布:短进程优先调度算法 编辑:程序博客网 时间:2024/05/16 01:38
Webpack config
我们可以通过配置一个webpack配置文件,默认名为webpack.config.js,这样我们可以制定打包的内容,打包后的文件名,打包后放在哪个位置。相比于之前webpack a.js a.bundle.js,这样更加简便。当然也可以执行--config命令行
Webpack Config
- context : 用于解决entry选项的基本目录(绝对路径)
- entry : 捆绑的入口点。
如果传递一个字符串:该字符串被解析为启动时加载的模块。
如果你传递一个数组或对象:启动时加载所有的模块。最后一个导出。 - output : 影响编译输出的选项。output选项告诉Webpack如何将编译的文件写入dist文件夹
- filename : 打包后的文件名
- path : 输出目录为绝对路径(必需),
path: __dirname + '/dist/js'
- publicPath : 在浏览器中引用时指定输出文件的公共URL地址
- entry为多个入口时,可以使用[name]、[hash]、[chunkhash]可以在filename内替换相应的内容,避免几个文件打包名重叠
- module : 影响正常模块的选项
- loader : 多个loader用’!’分开
- loaders : 作为字符串
- test : 必须满足的条件,例如可以使用正则表达式匹配
test: /\.jsx$/
- exclude : 不能满足的条件
- include : 路径或文件夹下的相关文件当被loader转化
plugins : 使用插件
- 先通过npm下载插件
-var webpackPlugin = require("webpack");
-new webpackPlugin [{
template:'index.html', //模板文件
filename:'xxx',
inject:'head' //script放在头部标签里
}]
ps 如果想要了解更多相应插件的配置选项可以到npm官网查询相应插件文档https://www.npmjs.com/完成了相关配置后,我们可以直接使用webpack完成打包了。
ps 如果Webpack配置文件名不为webpack.config.js(假设为a.js),那么我们必须使用webpack - -config a.js,完成config配置
module.exports={ entry:'./src/js/main.js', output:{ path: __dirname + '/dist/js', filename:'[name].bundle.js' }}
Webpack 使用准备
- 建立dist文件夹存放打包后的文件,目录下再新建js存放打包后的js文件
- 建立src文件夹存放开发的文件,目录下再新建js和style文件夹分别存放js文件和css文件,js文件夹下建立主程序main.js
- 建立index.html,并引入main.bundle.js(就是打包后的文件名)
- 上面提到webpack有许多命令选项如
--display-modules --colors --progress
等等,我们可以在npm的package.json中的”scripts”下新建”webpack”:”webpack想要添加的选项”,如下,我们在命令行工具中只需使用npm run webpack即可
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "webpack":"webpack --progress --display-modules --colors" }
Webpack 使用
上面的准备完成后,使用Webpack就很简单了,我们只需要执行命令npm run webpack就完成了
阅读全文
0 0
- Webpack 使用(二)
- webpack入门(二)——webpack使用
- webpack入门(二)——webpack使用
- webpack(二) loader的使用
- webpack使用(二)
- webpack使用笔记(二)
- webpack(二)配置
- webpack入门(二)
- Webpack学习(二)
- webpack的基本使用(二)
- (二)webpack入门——webpack的使用
- Webpack 使用(一)
- Webpack 使用(三)
- 【webpack】学习记录 (二)
- webpack(二) Loader,配置文件
- webpack实战(二)-loader
- webpack配置文件详解(二)
- 二九、webpack基本使用流程
- sysctl
- Linux 驱动面试题总结
- python 获取 模块 class 中所有方法
- Android设置EditText显示输入的表情Icon(自定义的聊天有个发送表情功能,在输入框显示表情)
- cxf+spring发布RESTful服务
- Webpack 使用(二)
- light oj 1005 Rooks(组合数)
- java 线程池相关
- contenteditable="true"元素过滤富文本样式
- 请求转发和包含
- mysql中按照季度、月份等分组
- Some good thing will happen.
- boost内存管理-堆内存managed_heap_memory的使用(未完成)
- Hbase报错问题