网站首页 > 技术文章正文

再不了解就落伍了!揭开构建神器webpack神秘面纱

nanyue 2024-10-04 18:14:01 技术文章 20 ℃

后续讲解webpack集成vue，请关注查看。

webpack构建源代码转换成浏览器可执行 JavaScript、CSS、HTML 代码，并进行优化、打包。

Webpack 通过递归的方式寻找出入口文件的所有依赖，并打包到目标文件中。支持模块化规范 ES6、CommonJS、AMD 。

首先需要安装好Nodejs，推荐 NodeJs 最新的长期支持版本(LTS ).

创建mytest文件夹，然后用VsCode打开，在里面建立文件夹和文件如下：

webpack.base.js内容:

const path = require('path')

module.exports = {

mode: 'development', // 模式設置

entry: path.resolve(__dirname, "../src/entry.js"),//入口

output: {//出口

path:path.resolve(__dirname,'../dist'),

filename: '[name].dist.js',

clean:true

}

Package.json里面内容为

{

"scripts": {

"build":"webpack --config build/webpack.base.js"

}

common.js内容：

entry.js内容：

index.html内容：

<html>

<head>

</head>

<body>

<div id="app">hello，webpack</div>

</body>

</html>

安装webpack,命令窗口输入

npm i webpack webpack-cli -D

执行 npm run build后，webpack会自动从entry.js开始把关联的文件进行打包，生成dist.js。

现在文件结构如下图：

可能有人会问这有什么用呢？