webpack学习笔记

webpack学习笔记

webpack打包js模块

1. 安装webpack

npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli

2. 在终端中输入打包的指令

npx webpack index.js
/*
注意点：index.js就是需要打包的文件
打包之后的文件会放在dist目录中，名称叫做main.js
*/

CommonJS规范

https://javascript.ruanyifeng.com/nodejs/module.html#toc2

webpack配置文件打包

在当前项目下创建一个webpack.config.js文件，配置如下：

1. 打包环境

mode:production/development
/*
production生产模式（会对打包之后的js代码进行压缩）
development开发模式（不会对打包之后的js代码进行压缩）
*/

2. 需要打包的文件

entry: "./index.js"

3. 指定打包之后文件输出的路径

output:{
filename: 'bundle.js',
path: path.resolve(__dirname, "bundle")
}
/*
filename:指定打包之后JS文件名称
path:指定打包之后文件的目录
打包文件目录获取，先要导入一个path模块
const path = require("path");
*/

4. 配置完毕后，终端输入打包指令npx webpack

webpack配置文件

注意事项：
配置文件名称必须叫做：webpack.config.js否则直接输入npx webpack会报错，如果要使用其他名称，那么输入打包命令时必须通过–config指定配置文件名称，如下：

npx webpack --config xxx

打包命令简化：
通过npm script简化操作

webpack-sourcemap

映射打包之前和打包之后的代码

企业开发配置：

/*
开发模式
*/
development: cheap-module-eval-source-map
/*
只需要行错误信息，并且包含第三方模块错误信息，并且不会生成单独sourcemap文件
*/
/*
生产模式
*/
production: cheap-module-source-map
/*
只需要行错误信息，并且包含第三方模块错误信息，并且会生成单独sourcemap文件
*/