1,必要的环境

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, 实际工作中遇到的问题

  1. 如何下手写?

    我是直接在 html 中引用通过webpack 编译好的 js 文件,因为我知道webpack 会把在这个页面或则项目中用到的js都打包到此文件中。

     <script src="../../buit/bindPhone.bundle.js"></script>
  2. 如何编写自己的业务模块代码?

    因为 webpack 是兼容 AMD 规范和 commonjs 的,所以,我们可以利用 require()来加载依赖包,也可以用 define() 来定义我们的模块。当然,更好的是直接抒写:

     var $ = require('jquery');
    
     require('./lib/jquery.mockjax.min.js');
    
     var Mock = (function(){
    ...
    })() module.exports = Mock;
  3. 如何处理基于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

  4. 在开发中,我们经常修修改改,难道每次都要 webpack 一下(编译)?

    可以使用 --watch 来监听文件变化,并执行编译。

    webpack --watch
    
    但是,我发现运行并不好事,所有我就用gulp来监听js文件变动,然后执行 webpack

webpack 项目实践的更多相关文章

  1. Vue + webpack 项目实践

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  2. nodejs, vue, webpack 项目实践

    vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...

  3. Node + Express + vue2.0 + Webpack项目实践

    技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js 都写在 ...

  4. react项目实践——(1)使用webpack创建项目

    1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹. mkdir webpack-demo && cd webpack-demo 2. 在./myapp中打开命令行 ...

  5. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  6. Vue项目实践中的功能实现与要点

    本贴记录项目实践中,各种功能的实现与技术要点,均有待改进. 路由切换的时候,显示loading动画 目前方案是: 在每个页面都手动装载一个loading组件组件的显示依赖vuex里面的一个值 , 在r ...

  7. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  8. Windows on Device 项目实践 3 - 火焰报警器制作

    在前两篇<Windows on Device 项目实践 1 - PWM调光灯制作>和<Windows on Device 项目实践 2 - 感光灯制作>中,我们学习了如何利用I ...

  9. Windows on Device 项目实践 2 - 感光灯制作

    在上一篇<Windows on Device 项目实践 1 - PWM调光灯制作>中,我们学习了如何利用Intel Galileo开发板和Windows on Device来设计并完成一个 ...

随机推荐

  1. ASP.NET Core 2 学习笔记(二)生命周期

    要了解程序的运行原理,就要先知道程序的进入点及生命周期.以往ASP.NET MVC的启动方式,是继承 HttpApplication 作为网站开始的进入点,而ASP.NET Core 改变了网站的启动 ...

  2. Oracle function函数赋权

    -- 1.赋权 -- 在原有权的账号下个执行 grant select on psprd.functionName to user; -- 2. 别名 -- 在需要使用别名的账号下执行 CREATE ...

  3. 逆变(contravariant)与协变(covariant)

    逆变(contravariant)与协变(covariant)是C#4新增的概念,许多书籍和博客都有讲解,我觉得都没有把它们讲清楚,搞明白了它们,可以更准确地去定义泛型委托和接口,这里我尝试画图详细解 ...

  4. sqlserver插入之字符串+数字

    declare @i int,@a varchar(10)set @i = 0set @a='hiro--'+LTRIM(@i)while @i < 500begin insert into h ...

  5. 面试题-选择题Python

    一. 6.下列表达式中返回为True的是() A.3>2>2   false B.'abc'>'xyz' false C.0x56<56 86<56   false 0x ...

  6. 查看服务器CPU的个数、CPU的核数、多核超线程数、机器硬件型号

    这里有几个概念: 1.一台物理机的物理CPU的个数 2.一个CPU上的核数 3.一个核上面支持的线程数 有下面的计算公式: # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 ...

  7. jmeter-server中启动后端口总是不断在变化

    1.首先找到这个文件打开: 2.修改两个地方如图: 第一个:server_port=xxxx 第二个:server.rmi.localport=xxxx 3.重启jmeter-server,这是在li ...

  8. HTML+Javascript制作拼图小游戏详解(二)

    上一篇我们说了网页的基本布局.接下来将为大家带来具体的实现方法. 拼图通表格来实现,做一个方形的表格,改变其大小使之如图所示. 试想一下如果我们将一张图片剪成6张分别放入对应位置,然后再把它打乱,这样 ...

  9. 向 webview 添加 userScript

    添加前,网页代码如下: <!DOCTYPE html> <html> <!--<script type="text/javascript"> ...

  10. 指定nginx某个目录显示目录结构

    1.修改配置文件/usr/local/nginx/conf/nginx.conf 指定目录,开启autoindex为on. location /study { autoindex on; } 2. 保 ...