最近想学点技术,就从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官网链接地址

Logo

前往低代码交流专区

更多推荐