此版紧接上一个webpack基础运用
在项目根目录下创建一个webpack.config.js文件(名字可以随便取,但是为了增加识别度,建议还是跟文中一样取法)
添加一下内容
module.exports = {
mode: 'development', // 打包方式
}
再次输入 npx webpack ./index.js 运行打包命令,查看与之前的异同.
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./index.js":
/*!******************!*\
!*** ./index.js ***!
\******************/
main.js就变成这个样子了(只是文件的极少一部分)
设置入口和出口.
入口文件是指:webpack从哪里开始分析文件.
出口是指:指定最后打包的文件,这个文件的具体位置在哪里.
默认入口一般是:src/js/index.js
此时可以省略入口文件,直接输入 npx webpack 从新打包文件(可以将之前的main.js删掉,可以更直观的看见效果).
此时目录调整为以下模式.
将src目录下的index.js该为main.js(开发中默认为main.js)
项目名
├── index.html
├── src
│ └── js
│ ├── main.js
│ └── tool.js
├── webpack.config.js # webpack的配置文件
└── package.json
在webpack.config.js的配置项中添加 entry项,从新打包项目,地址已经改变需要输入 : npx webpack ./src/js/main.js
指定出口文件:在webpack.config.js中设置output项.
目标:把出口文件设置到bulid下面的bulid.js文件下 , 一般情况下是要更改的.
引入node.js的核心模块.
const path = require('path')
console.log(path.join(__dirname,'/build'))
module.exports = {
mode: "production",
entry: './src/js/main.js', // 入口文件
output: {
"path": path.join(__dirname,'/build'), // 决定出口文件在哪里
"filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
}
}
注意:如果path的路径不存在,启动后会自动创建这个文件.
修改打包模式,webpack.config.js中的mode项会默认设置为production ,这时将mode改为development(开发者选项)
开发者模式:不会将代码压缩混淆.
生产模式:会将代码压缩,混淆,以达到保护代码和缩小文件体积的作用.
打包时指定配置文件
自己创建一个webpack.dev.config.js文件(名字可以随便取,但是建议取的以提高识别度为准)在根目录下.
推荐使用自己创建的文件来设置打包.命令如下
npx webpack --comfig webpack.dev.config.js
注意:新建文件的中的代码,与之前webpack.config.js中的代码是相同.只是使用场景不一样,这里只需要将之前的文件复制贴到里面就可以了.
简化打包命令
非必要处理,但是想之前的文件夹的名字过长,将文件名之间衔接的 点 失误打成了逗号,这种细小报错可能一下找到,也可能找一上午都不一定找的到.因为不管如何检查内部代码,都不会有问题,但就是一直报错,所以简化一下打包命令对开发有一定好处.
可以在package.json中添加script命令来快速启动webpack.
"scripts": {
"dev": "webpack --config webpack.dev.js",
"build": "webpack",
"test": "echo "Error: no test specified" && exit 1"
}
此时运用npm run build , npm run dev就可以了.
