【学习笔记】Webpack

2017-07-13 本文已影响41人跑者小越

├── dist                      打包输出目录, 只需部署这个目录到生产环境
├── package.json              项目配置信息
├── node_modules              npm安装的依赖包都在这里面
├── src                       我们的源代码
│   ├── components            可以复用的模块放在这里面
│   ├── index.html            入口html
│   ├── index.js              入口js
│   ├── libs                  不在npm和git上的库扔这里
│   └── views                 页面放这里
└── webpack.config.js         webpack 配置文件

1. `npm init`

生成一个默认的项目配置文件 package.json.

2. 安装 eslint, 用来检查语法报错

npm install eslint eslint-config-enough eslint-loader --save-dev

npm install 可以一条命令同时安装多个包, 包之间用空格分隔. 包会被安装进 node_modules 目录中。

--save-dev 会把安装的包和版本号记录到 package.json 中的 devDependencies 对象中, 还有一个 --save, 会记录到 dependencies 对象中, 它们的区别, 我们可以先简单的理解为打包工具和测试工具用到的包。

eslint-config-enough 是配置文件, 它规定了代码规范, 要使它生效, 我们要在package.json中添加内容:

{
  "eslintConfig": {
    "extends": "enough",
    "env": {
      "browser": true,
      "node": true
    }
  }
}

( 注：因为有些 npm 包安装是需要编译的, 那么导致 windows/mac/linux 上编译出的可执行文件是不同的, 也就是无法通用, 因此我们在提交代码到 git 上去的时候, 一般都会在 .gitignore 里指定忽略 node_modules 目录和里面的文件, 这样其他人从 git 上拉下来的项目是没有 node_modules 目录的 )

3. `npm install`

读取 package.json 中的 devDependencies 和 dependencies 字段, 把记录的包的相应版本下载下来。

4. 建立 src/index.html 文件.

注意这里我们不需要自己写<script src="index.js"></script>, 因为打包后的文件名和路径可能会变, 所以我们用webpack插件帮我们自动加上.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

5. 建立 src/index.js 文件.

// 引入作为全局对象储存空间的global.js, js文件可以省略后缀

import g from './global'

// 引入页面文件
import foo from './views/foo'
import bar from './views/bar'

const routes = {
  '/foo': foo,
  '/bar': bar
}

// Router类, 用来控制页面根据当前URL切换
class Router {
  start() {
    // 点击浏览器后退/前进按钮时会触发window.onpopstate事件, 我们在这时切换到相应页面
    // https://developer.mozilla.org/en-US/docs/Web/Events/popstate
    window.addEventListener('popstate', () => {
      this.load(location.pathname)
    })

    // 打开页面时加载当前页面
    this.load(location.pathname)
  }

  // 前往path, 会变更地址栏URL, 并加载相应页面
  go(path) {
    // 变更地址栏URL
    history.pushState({}, '', path)
    // 加载页面
    this.load(path)
  }

  // 加载path路径的页面
  load(path) {
    // 创建页面实例
    const view = new routes[path]()
    // 调用页面方法, 把页面加载到document.body中
    view.mount(document.body)
  }
}

// new一个路由对象, 赋值为g.router, 这样我们在其他js文件中可以引用到
g.router = new Router()
// 启动
g.router.start()

在webpack配置后，当我们访问http://localhost:8100/foo的时候, 路由会加载 ./views/foo/index.js文件

// 引入全局对象
import g from '../../global'

// 引入html模板, 会被作为字符串引入
import template from './index.html'

// 引入css, 会生成<style>块插入到<head>头中
import './style.css'

// 导出类
export default class {
  mount(container) {
    document.title = 'foo'
    container.innerHTML = template
    container.querySelector('.foo__gobar').addEventListener('click', () => {
      // 调用router.go方法加载 /bar 页面
      g.router.go('/bar')
    })
  }
}

借助webpack插件, 我们可以import html, css等其他格式的文件, 文本类的文件会被储存为变量打包进js文件, 其他二进制类的文件, 比如图片, 可以自己配置, 小图片作为Data URI打包进js文件, 大文件打包为单独文件.

6. 安装webpack和Babel

npm install webpack webpack-dev-server html-webpack-plugin html-loader css-loader style-loader file-loader url-loader --save-dev

webpack-dev-server是webpack提供的用来开发调试的服务器, 让你可以用 http://127.0.0.1:8080/ 这样的url打开页面来调试, 有了它就不用配置nginx了, 方便很多.

html-webpack-plugin, html-loader,css-loader,style-loader等看名字就知道是打包html文件, css文件的插件, 大家在这里可能会有疑问, html-webpack-plugin和html-loader有什么区别, css-loader和style-loader有什么区别, 我们等会看配置文件的时候再讲.

file-loader和url-loader是打包二进制文件的插件, 具体也在配置文件章节讲解.

接下来, 为了能让不支持ES6的浏览器(比如IE)也能照常运行, 我们需要安装babel, 它会把我们写的ES6源代码转化成ES5, 这样我们源代码写ES6, 打包时生成 ES5.

npm install babel-core babel-preset-env babel-loader --save-dev

这里babel-core顾名思义是babel的核心编译器.babel-preset-env是一个配置文件, 我们可以使用这个配置文件转换ES2015/ES2016/ES2017到ES5.

但是光安装了babel-preset-env, 在打包时是不会生效的, 需要在package.json加入babel 配置:

{
  "babel": {
    "presets": [
      "env"
    ]
  }
}
打包时babel会读取package.json中babel字段的内容, 然后执行相应的转换.

7. 配置webpack

创建webpack配置文件webpack.config.js, 注意这个文件是在node.js中运行的, 因此不支持ES6的import语法.

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 配置页面入口js文件
  entry: './src/index.js',

  // 配置打包输出相关
  output: {
    // 打包输出目录
    path: resolve(__dirname, 'dist'),

    // 入口js的打包输出文件名
    filename: 'index.js'
  },

  module: {
    /*
    配置各种类型文件的加载器, 称之为loader
    webpack当遇到import ... 时, 会调用这里配置的loader对引用的文件进行编译
    */
    rules: [
      {
        /*
        使用babel编译ES6/ES7/ES8为ES5代码
        使用正则表达式匹配后缀名为.js的文件
        */
        test: /\.js$/,

        // 排除node_modules目录下的文件, npm安装的包不需要编译
        exclude: /node_modules/,

        /*
        use指定该文件的loader, 值可以是字符串或者数组.
        这里先使用eslint-loader处理, 返回的结果交给babel-loader处理. loader的处理顺序是从最后一个到第一个.
        eslint-loader用来检查代码, 如果有错误, 编译的时候会报错.
        babel-loader用来编译js文件.
        */
        use: ['babel-loader', 'eslint-loader']
      },

      {
        // 匹配.html文件
        test: /\.html$/,
        /*
        使用html-loader, 将html内容存为js字符串, 比如当遇到
        import htmlString from './template.html'
        template.html的文件内容会被转成一个js字符串, 合并到js文件里.
        */
        use: 'html-loader'
      },

      {
        // 匹配.css文件
        test: /\.css$/,

        /*
        先使用css-loader处理, 返回的结果交给style-loader处理.
        css-loader将css内容存为js字符串, 并且会把background, @font-face等引用的图片,
        字体文件交给指定的loader打包, 类似上面的html-loader, 用什么loader同样在loaders对象中定义, 等会下面就会看到.
        */
        use: ['style-loader', 'css-loader']
      },

      {
        /*
        匹配各种格式的图片和字体文件
        上面html-loader会把html中<img>标签的图片解析出来, 文件名匹配到这里的test的正则表达式,
        css-loader引用的图片和字体同样会匹配到这里的test条件
        */
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,

        /*
        使用url-loader, 它接受一个limit参数, 单位为字节(byte)

        当文件体积小于limit时, url-loader把文件转为Data URI的格式内联到引用的地方
        当文件大于limit时, url-loader会调用file-loader, 把文件储存到输出目录, 并把引用的文件路径改写成输出后的路径

        比如 views/foo/index.html中
        ![](smallpic.png)
        会被编译成
        [站外图片上传中……(2)]

        而
        [站外图片上传中……(3)]
        会被编译成
        [站外图片上传中……(4)]
        */
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  },

  /*
  配置webpack插件
  plugin和loader的区别是, loader是在import时根据不同的文件名, 匹配不同的loader对这个文件做处理,
  而plugin, 关注的不是文件的格式, 而是在编译的各个阶段, 会触发不同的事件, 让你可以干预每个编译阶段.
  */
  plugins: [
    /*
    html-webpack-plugin用来打包入口html文件
    entry配置的入口是js文件, webpack以js文件为入口, 遇到import, 用配置的loader加载引入文件
    但作为浏览器打开的入口html, 是引用入口js的文件, 它在整个编译过程的外面,
    所以, 我们需要html-webpack-plugin来打包作为入口的html文件
    */
    new HtmlWebpackPlugin({
      /*
      template参数指定入口html文件路径, 插件会把这个文件交给webpack去编译,
      webpack按照正常流程, 找到loaders中test条件匹配的loader来编译, 那么这里html-loader就是匹配的loader
      html-loader编译后产生的字符串, 会由html-webpack-plugin储存为html文件到输出目录, 默认文件名为index.html
      可以通过filename参数指定输出的文件名
      html-webpack-plugin也可以不指定template参数, 它会使用默认的html模板.
      */
      template: './src/index.html'
    })
  ],

  /*
  配置开发时用的服务器, 让你可以用 http://127.0.0.1:8080/ 这样的url打开页面来调试
  并且带有热更新的功能, 打代码时保存一下文件, 浏览器会自动刷新. 比nginx方便很多
  如果是修改css, 甚至不需要刷新页面, 直接生效. 这让像弹框这种需要点击交互后才会出来的东西调试起来方便很多.
  */
  devServer: {
    // 配置监听端口, 因为8080很常用, 为了避免和其他程序冲突, 我们配个其他的端口号
    port: 8100,

    /*
    historyApiFallback用来配置页面的重定向

    SPA的入口是一个统一的html文件, 比如
    http://localhost:8010/foo
    我们要返回给它
    http://localhost:8010/index.html
    这个文件

    配置为true, 当访问的文件不存在时, 返回根目录下的index.html文件
    */
    historyApiFallback: true
  }
}

8.走一个

./node_modules/.bin/webpack-dev-server -d --hot

npm会把包的可执行文件安装到./node_modules/.bin/目录下, 所以我们要在这个目录下执行命令.

-d参数是开发环境(Development)的意思, 它会在我们的配置文件中插入调试相关的选项, 比如打开debug, 打开sourceMap, 代码中插入源文件路径注释.

--hot开启热更新功能, 参数会帮我们往配置里添加HotModuleReplacementPlugin插件, 虽然可以在配置里自己写, 但有点麻烦, 用命令行参数方便很多.

命令执行后, 控制台的最后一行应该是

webpack: bundle is now VALID.

这就代表编译成功了, 我们可以在浏览器打开http://localhost:8100/foo 看看效果.

要退出编译, 按ctrl+c.

开发环境编译试过之后, 我们试试看编译生产环境的代码, 命令是:

./node_modules/.bin/webpack -p

-p参数会开启生产环境模式, 这个模式下webpack会将代码做压缩等优化.

大家可能会发现, 执行脚本的命令有点麻烦. 因此, 我们可以利用npm的特性, 把命令写在package.json 中:

{
  "scripts": {
    "dev": "webpack-dev-server -d --hot --env.dev",
    "build": "webpack -p"
  }
}

package.json中的scripts对象, 可以用来写一些脚本命令, 命令不需要前缀目录 ./node_modules/.bin/, npm会自动寻找该目录下的命令. 我们可以执行

npm run dev

来启动开发环境.

执行

npm run build

来打包生产环境的代码.

进阶配置

上面的项目虽然可以跑起来了, 但有几个点我们还没有考虑到:

指定静态资源的url路径前缀
各个页面分开打包
打包时区分开发环境和生产环境
输出的entry文件加上hash
第三方库和业务代码分开打包
开发环境关闭performance.hints
配置favicon
开发环境允许其他电脑访问
打包时自定义部分参数
webpack-dev-server处理带后缀名的文件的特殊规则
代码中插入环境变量
简化import路径
优化babel编译后的代码性能
使用webpack 2自带的ES6模块处理功能
使用autoprefixer自动创建css的vendor prefixes
编译前清空dist目录

那么, 让我们在上面的配置的基础上继续完善, 下面的代码我们只写出改变的部分. 代码在examples/advanced目录.

详见【 https://zhuanlan.zhihu.com/p/27046322】

【学习笔记】Webpack

1. `npm init`

2. 安装 eslint, 用来检查语法报错

3. `npm install`

4. 建立 src/index.html 文件.

5. 建立 src/index.js 文件.

6. 安装webpack和Babel

7. 配置webpack

8.走一个

进阶配置

猜你喜欢

热点阅读

【学习笔记】Webpack

1. npm init

2. 安装 eslint, 用来检查语法报错

3. npm install

4. 建立 src/index.html 文件.

5. 建立 src/index.js 文件.

6. 安装webpack和Babel

7. 配置webpack

8.走一个

进阶配置

猜你喜欢

热点阅读

1. `npm init`

3. `npm install`