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最简单的配置文件完成。