webpack学习 笔记
Posted wei198621
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack学习 笔记相关的知识,希望对你有一定的参考价值。
前端js包演变过程
CommonJS
CommonsJS
服务器端的NodeJS遵循CommonsJS规范,该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块,然后通过exports或 module.exports 来导出需要暴露的接口。
require ( “module” ) ;
require ( " . ./ module.js " );
export.dostuff = function(){};
module.exports = somevalue;
优点:
·服务器端模块便于重用
· NPM中已经有超过45万个可以使用的模块包·简单易用
缺点:
·同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的·不能非阻塞的并行加载多个模块
AMD
Asynchronous Module Definition
CMD
CMD: Commons Module Definition
ES6 模块
EcmaScript6
import "jquery " ;
export function dostuff( ) {}
module “localModule” {}
安装Webpack
npm install webpack -g
npm install webpac k-cli -g
测试安装成功:
webpack -v
webpack- cli - v
C:\\workspace\\workspace_front\\vue\\vue狂神\\myvue>webpack -v
webpack 5.36.2
webpack-cli 4.6.0
C:\\workspace\\workspace_front\\vue\\vue狂神\\myvue>webpack-cli -v
webpack 5.36.2
webpack-cli 4.6.0
使用webpack
hello.js
// 暴露一个方法
exports.sayHi=function(){
document.write("<h1>狂神说ES6</h1>");
}
exports.sayHi2=function(){
document.write("<h1>狂神说ES6 2222</h1>");
}
//....
main.js
var hello = require("./hello");
hello.sayHi();
hello.sayHi2();
webpack.config.js
module.exports={
entry: './modules/main.js',
output:{
filename: "./js/bundle.js"
}
}
bundle.js
(()=>{var r,t={645:(r,t)=>{t.sayHi=function(){document.write("<h1>狂神说ES6</h1>")},t.sayHi2=function(){document.write("<h1>狂神说ES6 2222</h1>")}}},i={};(r=function r(e){var n=i[e];if(void 0!==n)return n.exports;var o=i[e]={exports:{}};return t[e](o,o.exports,r),o.exports}(645)).sayHi(),r.sayHi2()})();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
以上是关于webpack学习 笔记的主要内容,如果未能解决你的问题,请参考以下文章