webpack 项目实践
1,必要的环境
- node 环境 下载地址(http://nodejs.cn/)
- npm 貌似 下载地址(https://www.npmjs.com/)不过,貌似 Node 安装可自带 npm。
2, 建立项目工程
利用npm来初始化一个项目的工程文件,在命令窗口中找到项目文件
npm init
执行以上代码后,会在项目文件根目录生成一个 package.josn 文件(配置文件)
以后,安装的包的时候,使用 npm install ‘包名’ --save-dev
都可以把安装的包记录到 配置文件中,这样做的目的是,当你迁移项目的时候,只需要把你自己的代码打包走,然后带着 package.json 就可以直接迁移依赖包了。
3,建立 webpack 配置文件
这个需要我们手工建立,一般的配置文件名称默认写:webpack.config.js,
在此之前,需要我们利用 npm 来安装 webpack,一般我们安装到全局:
npm install webpack -g
然后,根据我们的实际情况来抒写我们的配置:
module.exports = {
// 基础路径
context : __dirname + '/src/script',
// 入口点,
entry : {
bindPhone : './bindPhone'
},
// 出口点
output : {
filename : '[name].bundle.js',
path : __dirname + '/built'
},
// 模块加载器,可解决不兼容 commonjs 的插件
module : {
loaders : [
{ test : require.resolve('jquery'), loader : 'expose?$!expose?jQuery'},
{ test : require.resolve('./src/script/lib/jquery.mockjax.min.js'), loader : 'exports?window.mockajax'}
]
}
}
具体每个配置项有什么用,可参看 API(http://webpack.github.io/docs/configuration.html)
4, 实际工作中遇到的问题
如何下手写?
我是直接在 html 中引用通过webpack 编译好的 js 文件,因为我知道webpack 会把在这个页面或则项目中用到的js都打包到此文件中。
<script src="../../buit/bindPhone.bundle.js"></script>
如何编写自己的业务模块代码?
因为 webpack 是兼容 AMD 规范和 commonjs 的,所以,我们可以利用 require()来加载依赖包,也可以用 define() 来定义我们的模块。当然,更好的是直接抒写:
var $ = require('jquery'); require('./lib/jquery.mockjax.min.js'); var Mock = (function(){
...
})() module.exports = Mock;
如何处理基于jquery的第三方插件?
实际工作中,因为暂时没有后台提供接口,因此,我就利用 mockjax 来模拟后台响应,这个插件依赖于 jquery 并且其本身不是AMD规范或则commonjs,所以遇到很多问题:
第一个问题 : jquery 未定义?
因为他依赖于jquery,但是我们并未在全局设定 jquery 对象,因此会报错,即使在 js 文件中require('jquery')
也不行var $ = require('jquery');
require('./lib/jquery.mockjax.min.js');
想这种类似的处理第三方的,我们一般解决办法是使用 shimming,要在 webpack 配置文件中把 jquery 变成全局变量
// 模块加载器,可解决不兼容 commonjs 的插件
module : {
loaders : [
{ test : require.resolve('jquery'), loader : 'expose?$!expose?jQuery'}
]
}
处理此方法我们依赖于 expose-loader,所以,我们要安装包
npm install expose-loader --save-dev
在开发中,我们经常修修改改,难道每次都要 webpack 一下(编译)?
可以使用
--watch
来监听文件变化,并执行编译。webpack --watch 但是,我发现运行并不好事,所有我就用gulp来监听js文件变动,然后执行 webpack
webpack 项目实践的更多相关文章
- Vue + webpack 项目实践
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- nodejs, vue, webpack 项目实践
vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...
- Node + Express + vue2.0 + Webpack项目实践
技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js 都写在 ...
- react项目实践——(1)使用webpack创建项目
1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹. mkdir webpack-demo && cd webpack-demo 2. 在./myapp中打开命令行 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- Vue项目实践中的功能实现与要点
本贴记录项目实践中,各种功能的实现与技术要点,均有待改进. 路由切换的时候,显示loading动画 目前方案是: 在每个页面都手动装载一个loading组件组件的显示依赖vuex里面的一个值 , 在r ...
- Hangfire项目实践分享
Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...
- Windows on Device 项目实践 3 - 火焰报警器制作
在前两篇<Windows on Device 项目实践 1 - PWM调光灯制作>和<Windows on Device 项目实践 2 - 感光灯制作>中,我们学习了如何利用I ...
- Windows on Device 项目实践 2 - 感光灯制作
在上一篇<Windows on Device 项目实践 1 - PWM调光灯制作>中,我们学习了如何利用Intel Galileo开发板和Windows on Device来设计并完成一个 ...
随机推荐
- XML Web Service架构图
- .net生成条形码
1..net 标准库(.net standard 2.0) Nuget添加引用:ZXing.Net生成条形码,ZXing.Net.Bindings.ImageSharp生成图片 public stat ...
- 790. Domino and Tromino Tiling
We have two types of tiles: a 2x1 domino shape, and an "L" tromino shape. These shapes may ...
- 前端入门CSS(2)
参考: https://www.cnblogs.com/liwenzhou/p/7999532.html 背景属性 /*背景颜色*/background-color: red; /*背景图片*/ ba ...
- objc_msgSend 作用
C 的函数调用方式 C 语言使用静态绑定,即在编译器就可以决定运行时所应调用的函数. 编译器在编译代码的时候就已经知道程序中有相应的函数,并直接生成调用函数的指令.函数地址硬编码在指令之中. OC 中 ...
- cobbler koan自动重装系统
介绍 koan是kickstart-over-a-network的缩写,它是cobbler的客户端帮助程序,koan允许你通过网络提供虚拟机,也允许你重装已经存在的客户端.当运行时,koan会从远端的 ...
- 【UOJ#435】【集训队作业2018】Simple Tree 分块+树链剖分
题目大意: 有一棵有根树,根为 1 ,点有点权.现在有 m 次操作,操作有 3 种:1 x y w ,将 x 到 y 的路径上的点点权加上 w (其中 w=±1w=±1 ):2 x y ,询问在 x ...
- 【PaddlePaddle系列】报错解决方法合集 (不定时更新)
1.PaddlePaddle使用CPU时正常运行,但是使用GPU时却报出一堆错误信息,节选如下: paddle.fluid.core.EnforceNotMet: enforce allocating ...
- celery问题记录
1. 问题:WARNING/MainProcess] /home/jihonghe/.virtualenvs/py3_dj217_env/lib/python3.6/site-packages/bil ...
- 剑指offer三十三之丑数
一.题目 如果一个数的因子中,出去1和本身以外,质数因子只包含2.3和5,则把改数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含质数因子7. 习惯上我们把1当做是第一个 ...