WebPack简介和配置

安装 Webpack

  • 全局环境: npm install webpack -g
  • 将 Webpack 安装到项目的依赖中:
    • 进入项目目录
    • 确定已经有 package.json,没有就通过 npm init 创建
    • 安装 webpack 依赖: npm install webpack --save-dev
  • 查看 webpack 版本信息: npm info webpack
  • 安装指定版本的 webpack: npm install [email protected] --save-dev
  • Webpack 开发工具: npm install webpack-dev-server --save-dev

Loader

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

特性

  • 可以通过管道方式链式调用,每个 loader 可以把资源转换成任意格式并传递给下一个 loader ,但是最后一个 loader 必须返回 JavaScript
  • 运行在 node.js 环境中,所以可以做任何可能的事情, 可以同步或异步执行
  • 可以接受参数,以此来传递配置项给 loader
  • 可以通过文件扩展名(或正则表达式)绑定给不同类型的文件
  • 可以通过 npm 发布和安装, 可以访问配置, 插件可以让 loader 拥有更多特性
  • 除了通过 package.json 的 main 指定,通常的模块也可以导出一个 loader 来使用
  • 可以分发出附加的任意文件
  • webpack只有单一的入口,其它的模块需要通过 import, require, url等导入相关位置

规范

  • loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader
  • 在引用 loader 的时候可以使用全名 json-loader,或者使用短名 json。这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义:Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

安装 loader

  • npm install css-loader style-loader

Babel

  • 一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到以下目的:
    • 下一代的JavaScript标准(ES6,ES7),这些标准目前并未被当前的浏览器完全的支持;
    • 使用基于JavaScript进行了拓展的语言,比如React的JSX

配置文件

  • Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件

  • 打包.css文件配置示例:
var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
        {
          test: /\.css$/, 
          loader: 'style-loader!css-loader'
        }
    ]
  }
}

resolve 和 resolveLoader

  • resolve 和 resolveLoader 参数来设置模块解析的处理细节
  • 当出现 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 环境

插件

  • 可以完成更多 loader 不能完成的功能。
  • 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定
  • 插件并不直接操作单个文件,它直接对整个构建过程其作用

编译

  • 通过参数让编译的输出内容带有进度和颜色: webpack --progress --colors
  • 启动监听模式, 没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译: webpack --progress --colors --watch

开发服务: 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

参考

  • 官方文档: http://webpack.github.io/docs/
  • Webpack 中文指南: http://webpackdoc.com/index.html
  • 入门Webpack,看这篇就够了: http://www.jianshu.com/p/42e11515c10f

标签: none

添加新评论