[关闭]
@buluoXu 2017-10-17T02:18:10.000000Z 字数 4256 阅读 1700

前端自动化工具--webpack

angularjs系列教程 npm webpack

一、Webpack 是什么

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器，在 Webpack 当中, 所有的资源都被当作是模块。
对于开发人员而言，好的包管理器可以让工作事半功倍。现在流行的编程语言大多有自己的包管理系统。近年来，Web开发越来越火，其开发工具也随之越来越好用了，而 Webpack 就是一款专为Web开发设计的包管理器。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。
Webpack 的火热离不开Facebook的react框架的推出。

二、安装

Webpack是基于nodejs开发的模块。。

1). 安装nodejs

  1. //test nodejs
  2. //进入cmd控制台
  3. node -v  //v0.12.7  目前最新的node版本是v4.2.1
  5. //test npm
  6. npm -v

node -v

npm -v

2). 通过npm安装webpack

  1. //Linux 、Mac
  2. $ npm install webpack -g
  4. //windows
  5. npm install webpack -g
  7. //test webpack
  8. webpack

这样webpack的命令就可使使用啦

webpack

3).开始使用

1、创建目录、初始化项目

  1. mkdir webpack-test //创建目录
  2. cd webpack-test //进入目录
  3. npm init //一路回车，最有输入yes，初始化项目 生成package.json文件

package.json

2、添加webpack配置文件

webpack.config.js

  1. var path = require('path');
  3. module.exports = {
  4.     entry: path.resolve(__dirname, 'app/main.js'),//入口文件
  5.     output: {//输出文件
  6.         path: path.resolve(__dirname, 'dist'),//输出目录dist
  7.         filename: 'bundle.js',//文件名
  8.     },
  9. };

3、目录结构
目录结构

4、项目代码

a、inde.html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>webpack-test</title>
  6. </head>
  7. <body>
  8. <script src="./dist/bundle.js"></script>
  9. </body>
  10. </html>

b、app/main.js代码

  1. 'use strict';
  3. var component = require('./component.js');
  5. document.body.appendChild(component());

c、app/component.js代码

  1. 'use strict';
  3. module.exports = function () {
  4.     var mycom=require('./common.js');
  5.     var element = document.createElement('h1');
  6.     element.innerHTML = mycom('Hello world 大家好嗡嗡222嗡2323啊');
  7.     return element;
  8. };

d、app/common.js代码

  1. 'use strict';
  3. module.exports = function (val) {
  4.     return "<span style='color:red'>"+val+"</span>";
  5. };

编译效果图

运行效果图

打包后的代码 

  1. /******/ (function(modules) { // webpackBootstrap
  2. /******/    // The module cache
  3. /******/    var installedModules = {};
  5. /******/    // The require function
  6. /******/    function __webpack_require__(moduleId) {
  8. /******/        // Check if module is in cache
  9. /******/        if(installedModules[moduleId])
  10. /******/            return installedModules[moduleId].exports;
  12. /******/        // Create a new module (and put it into the cache)
  13. /******/        var module = installedModules[moduleId] = {
  14. /******/            exports: {},
  15. /******/            id: moduleId,
  16. /******/            loaded: false
  17. /******/        };
  19. /******/        // Execute the module function
  20. /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/        // Flag the module as loaded
  23. /******/        module.loaded = true;
  25. /******/        // Return the exports of the module
  26. /******/        return module.exports;
  27. /******/    }
  30. /******/    // expose the modules object (__webpack_modules__)
  31. /******/    __webpack_require__.m = modules;
  33. /******/    // expose the module cache
  34. /******/    __webpack_require__.c = installedModules;
  36. /******/    // __webpack_public_path__
  37. /******/    __webpack_require__.p = "";
  39. /******/    // Load entry module and return exports
  40. /******/    return __webpack_require__(0);
  41. /******/ })
  42. /************************************************************************/
  43. /******/ ([
  44. /* 0 */
  45. /***/ function(module, exports, __webpack_require__) {
  47.     'use strict';
  48.     var component = __webpack_require__(1);
  50.     document.body.appendChild(component());
  52. /***/ },
  53. /* 1 */
  54. /***/ function(module, exports, __webpack_require__) {
  56.     'use strict';
  57.     module.exports = function () {
  58.         var mycom=__webpack_require__(2);
  59.         var element = document.createElement('h1');
  60.         element.innerHTML = mycom('Hello world 大家好嗡嗡222嗡2323啊');
  61.         return element;
  62.     };
  64. /***/ },
  65. /* 2 */
  66. /***/ function(module, exports) {
  68.     'use strict';
  70.     module.exports = function (val) {
  71.         return "<span style='color:red'>"+val+"</span>";
  72.     };
  75. /***/ }
  76. /******/ ]);

5、CSS及图片的引用

  1. require('./bootstrap.css');
  2. require('./myapp.less');
  3. require('./myapp.sass');
  5. var img = document.createElement('img');
  6. img.src = require('./glyph.png');

上边的是 JavaScript 代码, CSS 跟 LESS, 还有图片, 被直接引用了
实际上 CSS 被转化为 <style> 标签, 而图片可能被转化成 base64 格式的 dataUrl
但是要主要在 webpack.config.js 文件写好对应的 loader(请看第三节配置)

三、配置

1）loader加载器

  1. module.exports = {
  2.   entry: './main.js',
  3.   output: {
  4.     path: path.resolve(__dirname + "/dist/"),
  5.     filename: "[name]-bundle-[chunkhash].js",
  6.     hash: true
  7.   },
  8.   module: {
  9.     loaders: [
  10.       { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
  11.       { test: /\.css$/, loader: 'style-loader!css-loader' },
  12.       {test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css!sass")},//分离css
  13.       {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
  14.       {test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,loader: "file-loader?name=./fonts/[name].[ext]"},//读取字体文件
  15.     ]
  16.   }
  17. };

详情请访问webpack官网loaders

2）插件

详情请访问webpack官网plugins

四、相关推荐

  1. Webpack 入门指迷
  2. 前端webpack workflow（二）——Webpack基本使用
  3. webpack官网
  4. webpack 入门及实践

五、咱们动手实践吧！！！

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注