webpack学习总结篇
声明 本教程整理于互联网
// webpack.config.js
module.exports = {
// 入口
entry: {
'index': './index.js'
},
// 输出
output: {
path: './',
/*
[name] 是 entry 中的 key
entry: {
key: value
}
*/
filename: "[name].b.js"
}
};
module.exports 是 CommonJS 规范中定义一个文件对外接口的语法，webpack.config.js 文件对外的接口是一个 object ，其中定义了一些配置参数。
entry
最初 webpack 是为了构建 SPA (Single Page Application) ， entry
是『入口』配置。在 entry
中的文件才会被编译。
output
output
控制构建后的文件的存放位置和命名。 path
定义所有构建后文件的所在目录，本例中构建到当前文件夹。
filename
filename
控制构建后文件的文件名
源码和构建结果
// index.js
var content = require("./content.js")
document.body.innerHTML = document.body.innerHTML + content
// content.js module.exports = "some string"
<body> <atarget="_blank"href="https://github.com/nimojs/webpack-book/blob/gh-pages/1-modules/README.md">本例说明</a> <scriptsrc="index.b.js"></script> </body>
建议尽量理解构建后的代码，这样有助于理解 webpack
/******/ (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__){
var content = __webpack_require__(1)
document.body.innerHTML = document.body.innerHTML + content
/***/ },
/* 1 */
/***/ function(module, exports){
module.exports = "some string"
/***/ }
/******/ ]);
前面带 /******/
的代码都是 webpack
的模块化代码，它内置了一个模块加载器
模块 0 是 index.js
的代码，模块 1 是 require("./content.js")
的代码。如果你再 require
一个模块那么就会有模块 3。
JS包含样式
安装时间可能会比较久
# 安装所需 style-loader 和 css-loader npm install css-loader style-loader -D # less 和 less-loader 可以选择不安装 （如果安装了请去掉 index.js 中引入 less 的注释） npm install less-loader -D npm install less -g
webpack --watch
module.exports = {
entry: {
'index': './index.js'
},
output: {
path: './',
filename: "[name].b.js"
},
module: {
loaders: [
{
test: //.css$/,
loader: "style!css"
},
{
test: //.less$/,
loader: "style!css!less"
}
]
}
};
module.loaders
定义 require
的模块代码会被如何编译。 官方文档 using-loaders
module.loaders[].test
test
参数是一个正则表达式，用于匹配模块。 './index.css'.test(//.css&/)
module.loaders[].loader
loader
参数定义被 test
匹配到的模块会执行哪些构建操作
本例中 .css 后缀的文件会被 style-loader
和 css-loader
构建
require 时配置 loader
如果你不想在 webpack.config.js 配置，你还可以在 require 时单独定义一个文件会使用哪些 loader
require('!style!css!./index.css')
被嵌入 <head>
查看 在线预览构建结果页面
源码可以看到样式通过 JS 嵌入到 <head>
中使用的
<head>
<styletype="text/css">body{
background-color:#ABCDEF;
}</style>
</head>
JS包含图片
npm install url-loader file-loader -D
webpack --watch
代码解释待补充
使用全局变量
webpack -w
暴露全局变量
有些模块依赖全局变量 windows.jQuery
才能使用，可以通过 expose-loader
暴露全局变量
npm install jquery --save npm install expose-loader -D
webpack -w
提取单独样式文件
有时候我们需要编译单独的 CSS 文件，这就需要 extract-text-webpack-plugin 插件
npm install extract-text-webpack-plugin -D npm install style-loader css-loader -D
webpack -w
自动打包公用资源
npm install jquery paging --save
webpack -w
文件指纹 hash
webpack --watch
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
