开发总结—Webpack篇(简述)

作者:杨润炜
日期:2015/12/8 11:04

Webpack是一款模块加载及打包部署工具。它有以下优点:

  • 模块来源广泛,支持包括npm/bower等等的各种主流模块安装/依赖解决方案
  • 模块规范支持全面,amd/cmd以及shimming等一应具全
  • 浏览器端足迹小,移动端友好,却对热加载乃至热替换有很好的支持
  • 插件机制完善,实现本身实现同样模块化,容易扩展

为什么我要选用webpack呢?
除了它上面的优点外,还有就是我将它与之前我使用的requirejs比较了下,webpack自动将js,css,img,html等资源组合在一个模块中,比之前我们手动用文件名的形式来关联更方便、更优雅,这样很舒服地实现模块化和组件化的目标。

下面是我在本站所使用的webpack配置文件(webpack.config.js),里面有一些简单的注释,之后我会对其中一些作具体的记录。

  1. var path = require('path');
  2. var node_modules = path.resolve(__dirname, 'node_modules');
  3. // 提取文件的webpack插件
  4. var ExtractTextPlugin = require("extract-text-webpack-plugin");
  5. // 全局依赖
  6. var deps = [
  7. 'jquery/dist/jquery.js'
  8. ];
  9. var config = {
  10. // 配置输入模块
  11. entry: {
  12. 'index': './js/index.js',
  13. 'article': './js/article.js',
  14. 'tag': './js/tag.js'
  15. },
  16. // 配置加载的默认搜索的路径
  17. resolve: {
  18. extensions: ["", ".js"],
  19. modulesDirectories: [
  20. path.resolve(__dirname, 'node_modules'),
  21. path.resolve(__dirname, 'css'),
  22. path.resolve(__dirname, 'js')
  23. ],
  24. alias: {}
  25. },
  26. // 配置输出
  27. output: {
  28. filename: "js/[name].js?[hash]-[hash]",
  29. chunkFilename: "[name].js?[hash]-[hash]",
  30. path: __dirname + "/assets/",
  31. publicPath: "/assets/"
  32. },
  33. module: {
  34. noParse: [],
  35. loaders: [
  36. // 因为less现存在数学运算的问题(如calc无法计算),所以将其与css分离
  37. { test: /\.less$/,
  38. loader: ExtractTextPlugin.extract(
  39. "style-loader",
  40. "css-loader!less-loader?sourceMap",
  41. {
  42. // 图片、字体资源打包到css上级目录
  43. publicPath: "../"
  44. }
  45. )
  46. },
  47. { test: /\.css$/,
  48. loader: ExtractTextPlugin.extract(
  49. "style-loader",
  50. "css-loader?sourceMap",
  51. {
  52. // 图片、字体资源打包到css上级目录
  53. publicPath: "../"
  54. }
  55. )
  56. },
  57. // babel处理es6
  58. {
  59. test: /\.js?$/,
  60. exclude: [
  61. node_modules
  62. ],
  63. loader: 'babel'
  64. },
  65. // 导出全局依赖
  66. {
  67. test: path.resolve(node_modules, deps[0]),
  68. loader: 'expose?jQuery'
  69. },
  70. // 图片及字体打包
  71. {
  72. test: /\.(ttf|eot|svg|png|gif|woff(2)?)(\?.*?)?$/,
  73. loader: "file-loader"
  74. }
  75. ]
  76. },
  77. plugins: [
  78. // 配置以文件形式打包css
  79. new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {
  80. disable: false,
  81. allChunks: true
  82. })
  83. ]
  84. };
  85. // 其它
  86. deps.forEach(function (dep) {
  87. var depPath = path.resolve(node_modules, dep);
  88. // 设置替换模块名称与路径
  89. config.resolve.alias[dep.split(path.sep)[0].split('\/')[0]] = depPath;
  90. // 设置不解析的文件
  91. config.module.noParse.push(depPath);
  92. });
  93. module.exports = config;

感谢您的阅读!
如果看完后有任何疑问,欢迎拍砖。
欢迎转载,转载请注明出处:http://www.yangrunwei.com/a/1.html
邮箱:glowrypauky@gmail.com
QQ: 892413924