内容简介:1 创建项目文件夹 : webpack_test2 创建文件 package.json3 安装webpack
1 创建项目文件夹 : webpack_test
2 创建文件 package.json
3 安装webpack
npm install webpack -g npm install webpack --save-dev
webpack 只能打包js 或 json 文件,要打包其他类型的文件,需要用到打包工具loader
webpack 打包js文件
1 项目下新建src/js/entry.js文件,文件名自己定义
2 执行 webpack src/js/entry.js dist/js/bundle.js 命令, 表示将此js文件打包到dist/js/bundle.js文件下,这个文件夹系统会新建出来
webpack 打包json 数据
新建 test.json文件,里面写入数据,执行命令与打包js相似
webpack.config.js配置
新建webpack.config.js文件,配置该文件
const path=require('path');
module.exports = {
entry: './src/js/entry.js',
output:{
filename:'bundle.js',
path: path.resolve(_dirname,'dist/js/')
}
}
当配置好这个文件后,直接执行webpack命令,就能将所有需要打包的文件打包到dist/js/bundle.js里
接上面添加如下代码: 热加载配置
devServer:{
contentBase: 'dist/' //webpack-dev-server默认服务于根路径下的index,添加这句表示服务于dist目录下的
}
使用插件
常用插件 : html-webpack-plugin 根据模板html生成引入script的页面 clean-webpack-plugin 清除dist文件夹
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- TiDB入门(四):从入门到“跑路”
- MyBatis从入门到精通(一):MyBatis入门
- MyBatis从入门到精通(一):MyBatis入门
- Docker入门(一)用hello world入门docker
- 赵童鞋带你入门PHP(六) ThinkPHP框架入门
- 初学者入门 Golang 的学习型项目,go入门项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
全景探秘游戏设计艺术
Jesse Schell / 吕阳、蒋韬、唐文 / 电子工业出版社 / 2010-6 / 69.00元
撬开你脑子里的那些困惑,让你重新认识游戏设计的真谛,人人都可以成为成功的游戏设计者!从更多的角度去审视你的游戏,从不完美的想法中跳脱出来,从枯燥的游戏设计理论中发现理论也可以这样好玩。本书主要内容包括:游戏的体验、构成游戏的元素、元素支撑的主题、游戏的改进、游戏机制、游戏中的角色、游戏设计团队、如何开发好的游戏、如何推销游戏、设计者的责任等。 本书适合任何游戏设计平台的游戏设计从业人员或即将......一起来看看 《全景探秘游戏设计艺术》 这本书的介绍吧!