一個例子
有這么一個項目
demo
-- index.html
-- js
---- scripts.js
---- module1.js
---- module2.js
其中，index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>My Webpack Page</h1>
<script src="js/scripts.js"></script>
</body>
</html>
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規(guī)范，上述代碼直接在瀏覽器中打開是會報錯的。這就需要用到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 }),
]
};
在根目錄下下執(zhí)行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中使用包一樣了，是不是很嗨皮？
