手把手教你webpack3（1）最简单的webpack实例 小鱼儿 2022-06-03 23:43 200阅读 0赞 ### 0、前注 ### 本文内容源于[webpack中文文档][webpack]，以及我自己实践中写的若干DEMO。 每个DEMO以文件夹为单位，从入门到进阶，根据文件夹编号为准，逐步递进。 成文时，webpack版本是【3.8.1】 ### 0.1、安装webpack ### 首先你需要安装Node.js，[点击打开Node.js下载页面][Node.js]。安装完Node.js后，会自带npm包管理器。 > npm install webpack -g 这个命令将安装最新版本的webpack（全局，学习教程中推荐，避免多次安装。但实践中还是有必要一个项目一个webpack，避免版本冲突带来的bug） 目前版本是3.8.1（2017/11/27） > webpack -v 查看当前webpack版本 **执行命令：** 以下执行webpack命令时，指在对应文件夹下，通过控制台执行命令。 **快速抵达对应目录的控制台（win）：** 在对应目录下，按住 `shift`，然后点击鼠标右键，在弹窗里选择`在此处打开命令窗口`即可启用 ### 1、webpack基本结构 ### [示例目录][Link 1] 文件目录见`1、最简单的webpack实例`这个目录。 // webpack.config.js 这个是webpack的管理配置文件 // 以CMD的格式导出模块 module.exports = { // 入口文件，指向app.js entry: './app.js', // 出口文件 output: { // 文件名，将打包好的导出为bundle.js filename: './bundle.js' } } // app.js 这个是入口文件 import bar from './bar' bar() // bar.js 这个是入口文件引入的模块 export default function bar () { console.log('bar') } // page.html 这个是html目录文件，这个文件引入入口文件 <html> <head> <title>1、最简单的webpack实例</title> </head> <body> <script src="./bundle.js"></script> </body> </html> 控制台执行`webpack`（或者 `webpack --config webpack.config.js` ），会显示如下内容： D:\study notes\Project\webpack_learner\1、最简单的webpack实例>webpack Hash: 2fdcc03878d7c5480ce6 Version: webpack 3.8.1 Time: 58ms Asset Size Chunks Chunk Names ./bundle.js 3.13 kB 0 [emitted] main [0] ./app.js 115 bytes { 0} [built] [1] ./bar.js 142 bytes { 0} [built] 打完后的`bundle.js`文件内容略。这个时候打开html文件，查看控制台，会发现正常输出了`bar`。 [webpack]: https://doc.webpack-china.org/concepts/ [Node.js]: https://nodejs.org/zh-cn/download/ [Link 1]: https://github.com/qq20004604/webpack-study/tree/master/1%E3%80%81%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84webpack%E5%AE%9E%E4%BE%8B
还没有评论，来说两句吧...