美文网首页程序员WEB前端程序开发
ASP.NET项目中使用Webpack进行打包(一)

ASP.NET项目中使用Webpack进行打包(一)

作者: 凉风有兴 | 来源:发表于2017-07-19 01:55 被阅读1842次

    webpack 的优势

    其优势主要可以归类为如下几个:

    1. webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

    2. 能被模块化的不仅仅是 JS 了。

    3. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

    4. 扩展性强,插件机制完善,特别是支持 React 热插拔(见 react-hot-loader )的功能让人眼前一亮。

    为什么用 webpack?

    如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.

    他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.

    它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS。

    那么对于ASP.NET这样的项目来说,webpack就是用来打包代码的。所以,在我们这个项目里面,配置非常的入门,有用到的、非用不可的我才会拿来说说,比较学习成本也是很大的。

    在项目开始之前,我们先来了解一下全静态页面的Webpack是如何打包的。

    Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为wsp),转到该文件夹后执行下述指令就可以完成安装。

    //全局安装
    npm install -g webpack
    //安装到你的项目目录
    npm install --save-dev webpack
    

    我们使用输入npm init

    PS D:\WSP> npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible
    
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg> --save` afterwards to install a package an
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    name: (WSP)
    Sorry, name can no longer contain capital letters.
    name: (WSP) wsp
    version: (1.0.0)
    description:
    entry point: (index.js)
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to D:\WSP\package.json:
    
    {
      "name": "wsp",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "dependencies": {
        "webpack": "^3.3.0"
      },
      "devDependencies": {},
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    
    Is this ok? (yes) yes
    
    文件列表文件列表

    按上图文件列表增加文件夹以及文件。

    打开index.html,输入以下代码:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
      </head>
      <body>
        <div id='root'>
        </div>
        <script src="bundle.js"></script>
      </body>
    </html>
    

    输入Greeter.js代码

    
    // Greeter.js
    module.exports = function() {
      var greet = document.createElement('div');
      greet.textContent = "您好,这是神奇的WebPack";
      return greet;
    };
    
    
    
    
    //main.js
    var greeter = require('./Greeter.js');
    document.getElementById('root').appendChild(greeter());
    

    最后,在根目录下面新建文件webpack.config.js,配置如下:

    //webpack.config.js
    module.exports = {
      entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
      output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      }
    }
    
    
    {
      "name": "wsp",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "dependencies": {
        "webpack": "^3.3.0"
      },
      "devDependencies": {},
      "scripts": {
          "start": "webpack" 
        },
      "author": "",
      "license": "ISC"
    }
    
    

    此处是将webpack置于启动项,那么我们只需要运行npm start即可。

    命令窗口,打包成功命令窗口,打包成功

    这是一个最基本的打包命令,我们接着往下看:

    这时候打开bundle.js一看

    /******/ (function(modules) { // webpackBootstrap
    /******/    // The module cache
    /******/    var installedModules = {};
    /******/
    /******/    // The require function
    /******/    function __webpack_require__(moduleId) {
    /******/
    /******/        // Check if module is in cache
    /******/        if(installedModules[moduleId]) {
    /******/            return installedModules[moduleId].exports;
    /******/        }
    /******/        // Create a new module (and put it into the cache)
    /******/        var module = installedModules[moduleId] = {
    /******/            i: moduleId,
    /******/            l: false,
    /******/            exports: {}
    /******/        };
    /******/
    /******/        // Execute the module function
    /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    /******/        // Flag the module as loaded
    /******/        module.l = true;
    /******/
    /******/        // Return the exports of the module
    /******/        return module.exports;
    /******/    }
    /******/
    /******/
    /******/    // expose the modules object (__webpack_modules__)
    /******/    __webpack_require__.m = modules;
    /******/
    /******/    // expose the module cache
    /******/    __webpack_require__.c = installedModules;
    /******/
    /******/    // define getter function for harmony exports
    /******/    __webpack_require__.d = function(exports, name, getter) {
    /******/        if(!__webpack_require__.o(exports, name)) {
    /******/            Object.defineProperty(exports, name, {
    /******/                configurable: false,
    /******/                enumerable: true,
    /******/                get: getter
    /******/            });
    /******/        }
    /******/    };
    /******/
    /******/    // getDefaultExport function for compatibility with non-harmony modules
    /******/    __webpack_require__.n = function(module) {
    /******/        var getter = module && module.__esModule ?
    /******/            function getDefault() { return module['default']; } :
    /******/            function getModuleExports() { return module; };
    /******/        __webpack_require__.d(getter, 'a', getter);
    /******/        return getter;
    /******/    };
    /******/
    /******/    // Object.prototype.hasOwnProperty.call
    /******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    /******/
    /******/    // __webpack_public_path__
    /******/    __webpack_require__.p = "";
    /******/
    /******/    // Load entry module and return exports
    /******/    return __webpack_require__(__webpack_require__.s = 0);
    /******/ })
    /************************************************************************/
    /******/ ([
    /* 0 */
    /***/ (function(module, exports, __webpack_require__) {
    
    //main.js
    var greeter = __webpack_require__(1);
    document.getElementById('root').appendChild(greeter());
    
    
    /***/ }),
    /* 1 */
    /***/ (function(module, exports) {
    
    // Greeter.js
    module.exports = function() {
      var greet = document.createElement('div');
      greet.textContent = "您好,这是神奇的WebPack";
      return greet;
    };
    
    
    /***/ })
    /******/ ]);
    

    代码几乎没怎么变过,我们除了需要打包以外,还需要将js代码进行压缩混淆。这个时候就是需要UglifyJsPlugin了。

    如果你系统里面还没有这个插件,首先需要安装。输入以下命令:

    npm install uglifyjs-webpack-plugin --save-dev

    下面将webpack.config.js配置文件再修改一下:

    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    module.exports = {
      entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
      output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      },
        plugins: [
          new UglifyJSPlugin({
         mangle: {
           except: ['$super', '$', 'exports', 'require']
           //以上变量‘$super’, ‘$’, ‘exports’ or ‘require’,不会被混淆
         },
         compress: {
           warnings: false
         }
       })
        ]
    }
    
    

    运行npm start,这时候打开bundle.js,嗯,基本满意:

    !function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};e.m=t,e.c=n,e.d=function(exports,t,n){e.o(exports,t)||Object.defineProperty(exports,t,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,exports,e){var n=e(1);document.getElementById("root").appendChild(n())},function(t,exports){t.exports=function(){var t=document.createElement("div");return t.textContent="您好,这是神奇的WebPack",t}}]);
    

    什么,你还不太满意,那么再来一个babel编译,有时间有能力破解你代码的人一定会写出js来的。

    相关文章

      网友评论

        本文标题:ASP.NET项目中使用Webpack进行打包(一)

        本文链接:https://www.haomeiwen.com/subject/pypkkxtx.html