项目结构

一个项目 有很多文件:

js : js coffee jade css: css sass scss 图片: png

依赖: 文件之间有联系

js 会依赖 css (需要css里面的参数..) css 会依赖图片: … js 也会依赖图片… 控制图片显示等等..

这里的依赖关系很复杂…

什么是 Webpack

最初: js代码的模块打包工具 现在: 前端代码的管理工具.

  • 旧方式: html css js 都是分离的.必须分别对每一项进行管理.

模块打包器 & 构建系统.

有了 webpack 你就不需要构建你的 saas文件 和 对图片资源做优化了.只需要把他们都包含进来.然后打包你所有的模块. 然后在 html 页面里面引用就了一了:

import stylesheet from 'styles/my-styles.scss';
import logo from 'img/my-logo.svg';
import someTemplate from 'html/some-template.html';

你所有的静态资源都可以被当作模块. 然后引入. 修改 操作. 并打包到最终输出的文件中.

为了实现这个目的. 你需要在webpack中 注册loaders loaders 是一些小插件. loaders: 基本功能: 对不同类型的文件执行不同的操作 loaders: 基本功能: 对不同类型的文件执行不同的操作 loaders: 基本功能: 对不同类型的文件执行不同的操作

loader 实例

{
  // 当你引入 .ts 后缀的文件时,使用 TypeScript 解析文件
  test: /\.ts/,
  loader: 'typescript',
},
{
  // 遇到图片文件,使用 image-webpack (封装了 imagemin) 压缩,并转换为内联 data64 URLs
  test: /\.(png|jpg|svg)/,
  loaders: ['url', 'image-webpack'],
},
{
  // 遇到 SCSS 文件,使用 node-sass 解析,然后传递给 autoprefixer,最终以 CSS 字符串的形式返回结果
  test: /\.scss/,
  loaders: ['css', 'autoprefixer', 'sass'],
}

所有的 loader 最终输出都是 返回字符串. 这使得 webpack 可以把他们都打包进 js 模块中. 如: sass 文件经过loader转换 最终输出肯恩是: export default ‘body{font-size:12px}’;

webpack 好处

图像 和 css 都在 js 中. 这是什么鬼……

把所有东西都整合到一个文件(为了减少http请求)这种做法的缺陷: 额外加载了一大堆不必要的静态资源.

如果你不打包成一个文件. 你很可能会把静态资源手动包含到特定页面.导致依赖树非常混乱.难以维护.

这两种做法各有优缺点. webpack 就是一个两者的平衡点. 不只是构建系统. 也不只是打包器. 他是一个 聪明绝顶的 模块打包系统. 一旦合理的配置好. 可以帮你实现最佳优化方案..

实例

一: 项目终端: 安装jquery 依赖. cnpm install jquery –save 安装 webpack 依赖 cnpm install webpack –save-dev

二: entry.js var $ = require(‘jquery’); $(‘body’).html(‘Hello’);

三: webpack.config.js entry: { app: “./entry.js”, }, output: { path: “./js”, filename: “bundle.js”, },

四: webpack entry.js bundle.js 就会打包好文件了…

  1. html footer 引如 bundle.js

  2. jekyll build.

艹 又出现 double watched 错误了…. 但是还能运行… 只是build的时候会报错… 把 node-module 文件夹移出项目就可以了.. 反正这个文件夹可以在项目文件夹外的..

第一个 loader

思路: 使用一套可重用. 互相独立的ui组件. 称为 web components…

为了让主键真正的相互独立开. 必须在组件内部打包其所有的依赖.

首先 es 2015 .

添加第一个 loader Babel.

\1. $ npm install babel-loader –save-dev 然后 package.json 就会多出一个 babel.

  1. babel loader 不会自动安装 babel.我们还需要安装 babel 本身的 babel-core包.和我们需要的 es2015 preset:

    npm install babel-core babel-preset-es2015 –save-dev

  2. 创建 .babelrc 文件 告诉 Babel 使用哪个 preset。这是一个简单的 JSON 文件,允许你配置 Babel 使用哪些转换器来转换你的代码 —— 在我们的例子里使用的就是 es2015preset。

    .babelrc { “presets”: [“es2015”] }

  3. 修改 webpack 配置文件. 想要babel 作用在 所有.js 文件里. 因为 webpack 会遍历所有依赖. 我们要避免 babel 作用在 jquery 这些第三方库. 这里我们加上过滤规则. loader 可以同时包含 include exclude. 可以是 字符串. 正则式. 回调函数 等等.

    loaders: [ { test: /.js/, loader: ‘babel’, include: __dirname + ‘/src’, } ],

这里只作用到 源代码目录…

由于 引入了 babel 我们就可以用 es6 重写 index.js 了.

import $ from 'jquery';

$('body').html('Hello');

这里和之前的区别就是 var 和 import…

小按钮组件

包含 scss 样式 一个 html 模板 和一些行为.

先安装依赖: mostache. 轻量级的模板包.. 还要sass 和 html 的loader

由于结果是 从一个loader 到另一个loader 传递的. 我们还需要css-loader 来处理 sass loader输出的结果. .

现在我们有了css资源. 可以通过多种方式处理 一般用 style-loader 把css 动态注入到 页面中.

$ npm install mustache --save

$ npm install css-loader style-loader html-loader sass-loader node-sass --save-dev

为了告诉 webpack 我们是从一个 loader 传递向另一个 loader. 我们要用 ! 这个符号 来串联两个loader.

{
test:    /\.js/,
loader:  'babel',
include: __dirname + '/src',
},
{
test:   /\.scss/,
loader: 'style!css!sass',
// 或者
loaders: ['style', 'css', 'sass'],
},
{
test:   /\.html/,
loader: 'html',
}

代码分离

有时候不需要用到 按钮.

这种情况下 我们不想引入所有的按钮样式.模板.. 等等各种东西是吧… 这时候 就需要 代码分离了..

思路就是 可以在代码中定义分离点. 折不断代码将被分离成一个独立的文件 按需加载… 语法很简单:

import $ from 'jquery';

// 这里就是分离点
require.ensure([], () => {
  // 把所有代码和需要引入的内容放在这里
  // 这里的代码最终会分离到一个独立的文件中
  const library = require('some-big-library');
  $('foo').click(() => library.doSomething());
});

require.ensure 函数里面的所有内容. 会被分离成一个 数据块. webpack 只有在页面需要的时候 通过ajax 按需加载. 也就是 我们的结构代码 变成这样了..

bundle.js
|- jquery.js
|- index.js // 主文件
chunk1.js
|- some-big-libray.js
|- index-chunk.js // Callback 里的代码

你不需要在任何地方引入或者加载 chunk1.js 文件,Webpack 会在页面真正需要这部分代码时按需加载。这意味着你可以把许多不同的代码逻辑包裹成不同的块,在我们的例子中,我们想要的是在页面包含 a 标签时才引入 Button 的代码:

babel-loader

babel 对es6 进行代码转换. 在query 里面同样使用了 es2015 转码规则.