Webpack 1.0.1

309 阅读2分钟

Webpack - 打包js文件

Webpack 1.0.0 juejin.cn/post/684490…

按照webpack1.0.0配置完成后,如果你只想打包js文件,把所有的js文件用import或者require的方式引入到index.js 或者 任何目标js文件中,在终端输入npx webpack index.js,工程目录会生成一个dist文件夹,里面包含main.js文件,这样你的所有js文件就会打包到main.js文件中,在html入口页引用这个main.js。你的html就会加载一个js文件,后期维护js代码将会非常方便。

你也可以用这种方式打包图片文件,了解webpack的开发者肯定会有疑问,为什么没有配置webpack打包图片方法而打包成功了呢?这是因为webpack的开发者已经将打包图片设置为默认配置。

Webpack - 配置文件

在项目开发中,仅仅打包js文件是远远不能满足开发需求的,这时就需要配置Webpack。

在工程目录中新建webpack.config.js文件当作Webpack的打包配置文件。⚠️

⚠️webpack必须要用webpack.config.js 这个名称为配置文件名称。webpack只认识这个名称。

⚠️如果命名为其他文件名,打包时在终端输入 npx webpack --config 自定义名称.js


const path = require('path')    // 引入node 的path 模块

module.exports                       // 对外输出接口

mode                                       //打包模式,默认为production(代码压缩)

entry                                         //webpack提供的接口

output                                      //webpack提供。配置输出文件名称,文件夹名称。⚠️

⚠️ path.resolve方法中 __dirname 是两个下划线。

在终端中输入 npx webpack 打包成功。

使用前端框架脚手架工具开发者使用npm run bundle 来实现打包,npx则么转换为npm呢?

在package.json文件中"scripts"对象中写入 "bundle":"webpack"即可。


Q:npx?

A:npx 的使用是因为下载了 webpack-cli 。如果只下载webpack是不能写npx命令行的。

Q:bundle?

A:bundle后面只写webpack为什么可以打包。虽然没有全局安装webpack,但是scripts会在你引入的资源文件中查找webpack,如果没有找到再去查找全局webpack。

至此webpack最简单的配置文件完成。