前端开发目前我们遇到什么复杂的问题?
webpack is a static module bundler for modern JavaScript application.
npm install webpack webpack-cli -D(局部安装) npm install webpack webpack-cli -g(全局安装)
在编写代码的时候,模块化有很多种方式实现,ES6和commonjs的方式,如果两种方式同时使用的话,浏览器并不能识别,这之后需要用到webpack帮助我们改造打包
进入文件夹中输出webpack,多了一个dist文件夹,是被压缩过的代码,直接在index.html引入dist下的文件,代码在浏览器下可以正常运行
dist文件夹下直接转化出来的是ES6的代码。在weback官方文档中提到,webpack不会更改代码中除了import和export语句以外的部分(没有配置babel的情况下)
直接敲webpack命令的时候,实际执行的是:在src的目录下面找index.js的文件,用这个文件作为入口,之后通过这个入口去看对其他一些文件的引入,再进行转化打包
直接敲webpack的时候,是全局的webpack,但是实际上用的是局部的webpack
由于需要配置好不同的webpack,所以需要在文件中配置package.json的文件,用npm install安装
生成package.json配置文件
npm init
安装局部的webpack
npm install webpack webpack-cli -D
直接敲webpack用的是全局的webpack,需要用局部的webpack
方法一:
./node_modules/.bin/webpack
方法二:
npx webpack
方法三:
在package.json里面写命令
"scripts": { "build": "webpack" } -> npm run build
指定入口和出口
方法一:
npx webpack --entry ./src/main.js --output-path ./build
方法二:package.json
"scripts": { "build": "webpack --entry ./src/main.js --output-path ./build" } -> npm run build
以上查阅官方文档:文档-API-命令行接口 Flags
应用的时候,在webpack配置:
新建webpack.config.js
const path = require("path"); module.exports = { // 单入口 entry: "./src/main.js", // output跟的是对象 output: { // 打包的文件名 filename: "bundle.js", // 这里的路径不能使用相对路径,只能使用绝对路径 // __dirname这个可以拿到当前文件的绝对路径,拼接上build文件夹 path: path.resolve(__dirname, "./build") } }
如果webpack配置文件不叫webpack.config.js的时候,执行命令,相当于执行的时候没有配置webpack的命令。
webpack手动指定配置文件
// --config + 文件名 webpack --config wk.config.js
src目录下有一个text.js
console.log("hello world")
在打包的时候没有打包进去,为什么?
因为webpack从入口文件开始进去,寻找用到的文件进行打包,text.js与入口文件没有任何关系,所以没有打包的必要,就没有打进去
那么webpack到底是怎么对我们的项目进行打包的呢?
事实上webpack在处理应用程序时,会根据命令或者配置文件找到入口文件
从入口开始,会生成一个依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(js文件,图片,css文件,字体)
然后遍历图结构,打包一个个模块
所以说,如果一个东西没有用到的时候,虽然存在在项目内,但是webpack不会对它进行打包
这个就是tree-shaking
需要打包的话,可以通过入口文件引入
import "./js/text"