Webpack 入门指迷

luoyjx · 2015-07-27 20:25 · 1264次阅读

Webpack 是什么

https://github.com/webpack Webpack 是德国开发者 Tobias Koppers 开发的模块加载器 Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了 在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等… 因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl

对应各种不同文件类型的资源, Webpack 有对应的模块 loader 比如 CoffeeScript 用的是 coffee-loader, 其他还有很多: http://webpack.github.io/docs/list-of-loaders.html 大致的写法也就这样子:

module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      { test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders can take parameters as a querystring
    ]
  },

CommonJS 与 AMD 支持

Webpack 对 CommonJS 的 AMD 的语法做了兼容, 方便迁移代码 不过实际上, 引用模块的规则是依据 CommonJS 来的

require('lodash') // 从模块目录查找
require('./file') // 按相对路径查找

AMD 语法中, 也要注意, 是按 CommonJS 的方案查找的

define (require, exports. module) ->
  require('lodash') # commonjs 当中这样是查找模块的
  require('./file')

基本的使用

安装 webpack 模块之后, 可是使用 webpack 这个命令行工具 可以使用参数, 也可以配置 webpack.config.js 文件直接运行 webpack 调用 建议按照 Peter Hunt 给的教程走一遍, 基本的功能都会用到了 https://github.com/petehunt/webpack-howto

简单的例子就是这样一个文件, 可以把 ./main.js 作为入口打包 bundle.js:

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  }
};
收藏

暂无评论

登录后可以进行评论。没有账号?马上注册