前端打包工具-webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。


webpack工作示例

安装webpack

前置:需要先安装node.js; (mac 系统 brew install node)
应用npm安装webpack:

npm install webpack -g
npm install webpack-cli -g

项目示例

  1. 创建项目app
mkdir app
  1. 项目中新建js文件src/jsfile1.js,内容如下:
document.write("It file1 works.");

新建js文件src/jsfile2.js,内容如下:

document.write("It file2 works.");
  1. 项目中新建index.html文件,内容如下:
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="dist/main.js" charset="utf-8"></script>
    </body>
</html>

dist/main.js为webpack自动生成的打包后的文件;
4.打包两个.js文件:

webpack src/index.js src/index2.js

输出如下,表示成功:


5.打开index.html预览;


结果

=================
官方网站:
https://webpack.docschina.org/concepts/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容