webpack初试

一个例子

有这么一个项目
demo
-- index.html
-- js
---- scripts.js
---- module1.js
---- module2.js
其中，index.html

    
    


    
My Webpack Page
    

scripts.js、module1.js、module2.js

// scripts.js
require('./module1.js');
require('./module2.js');

// module1.js
console.log("module1 stuff");

// module2.js
console.log("module2 stuff");

显然，require是commonJS规范，上述代码直接在浏览器中打开是会报错的。这就需要用到webpack了

安装配置webpack

npm init
npm install webpack --save
npm install webpack -g

在项目根目录下新建webpack.config.js:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
    context: __dirname,
    devtool: debug ? "inline-sourcemap" : null,
    entry: "./js/scripts.js",
    output: {
        path: __dirname + "/js",
        filename: "scripts.min.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ]
};

在根目录下下执行webpack，得到scripts.min.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] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.loaded = 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;
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    /**
     * Created by Administrator on 2016/6/29 0029.
     */
    __webpack_require__(1);
    __webpack_require__(2);


/***/ },
/* 1 */
/***/ function(module, exports) {

    /**
     * Created by Administrator on 2016/6/29 0029.
     */
    // module #1
    console.log("module1 stuff");

/***/ },
/* 2 */
/***/ function(module, exports) {

    /**
     * Created by Administrator on 2016/6/29 0029.
     */
    // module #2
    console.log("module2 stuff");

/***/ }
/******/ ]);
....

也可以设置NODE_ENV=production，然后在webpack，这样得到的就是压缩后的，此时将index.html中的scripts.js改成scripts.min.js，就可以在浏览器中输出预期的内容了。

引入jquery，并使用

npm install jquery -S

修改module1.js

var $ = require('jquery'); // 这里的$只在当前module下有效
$('h1').html('new text');

我们可以像在nodejs中使用包一样了，是不是很嗨皮？