webpack的使用和vue.js的初次尝试

最近想学点技术，就从webpack开始了。其中参考了webpack 的中文指南。中文指南链接地址

下面是阅读笔记。方便自己以后记忆。

CommonJS

　　node.js 遵循commonJS规范，规范的核心思想是允许模块通过require方法来同步加载所要依赖的其他模块，然后通过exports或module.exports来导出需要暴露的接口。

优点：

　　*服务器端模块便于重用

　　*npm已经有将近20万个可使用模块包

　　*简单并容易使用

缺点：

　　*同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是 异步加载的，不能非阻塞的并行加载多个模块

Webpack

　　*webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

　　*webpack会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到bundle.js 。webpack会给每个模块分配一个唯一的id并通过这个id索引和访问模块。在页面启动时，会先执行entry.js中代码，其他模块会在运行require的时候再执行。

Loader

*webpack本身只能处理JavaScript模块，如果需要处理其他类型的文件，就需要使用loader进行转换。

npm安装webpack

*npm install webpack -g

本地目录安装webpack

*npm install webpack --save-dev

查看 webpack 版本信息

*npm info webpack

编译打包

*webpack entry.js bundle.js

安装loader

*npm install css-loader style-loader

载入css

require("!style!css!./style.css")

简写为require(“./style.css”)

执行语句改为

webpack entry.js bundle.js --module-bind 'css=style!css'(有时为双引号)

　　当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

安装

$ npm install webpack-dev-server -g

运行

$ webpack-dev-server --progress --colors

打印输出信息

webpack --display-error-details

　　当引入通过 npm 安装的 node.js 模块时，可能出现找不到依赖的错误。Node.js 模块的依赖解析算法很简单，是通过查看模块的每一层父目录中的 node_modules 文件夹来查询依赖的。当出现 Node.js 模块依赖查找失败的时候，可以尝试设置 resolve.fallback 和 resolveLoader.fallback 来解决问题。

module.exports = {
      resolve: { fallback: path.join(__dirname, "node_modules") },
      resolveLoader: { fallback: path.join(__dirname, "node_modules") }
    };

　　Webpack 中涉及路径配置最好使用绝对路径，建议通过 path.resolve(__dirname, “app/folder”) 或 path.join(__dirname, “app”, “folder”) 的方式来配置，以兼容 Windows 环境。

CommonJS规范

　　CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。

安装npm时报错npm ERR！Windows_NT 6.1.7601(仍存在问题)

　　先设置代理为空 npm config set proxy null， 然后再npm install cnpm -g –registry=https://registry.npm.taobao.org！

vue.js 开发版本

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

参考于vue.js官网链接地址