学习webpack4.0的笔记，循序渐进，后续会再做系统总结
[toc]
webpack安装
总结
- 安装本地的webpack
webpack webpack-cli -D
- 加一个-D表示开发依赖 上线的时候不需要这两个包
流程：
初始化项目 生成package.json记录依赖
yarn init -y
或者
npm init -y
安装 webpack和webpack-cli （webpack4.0需要安装webpack和webpack-cli）
yarn add webpack wabpack-cli -D
或者
npm install webpack webpack-cli --save-dev
image
webpack可以进行0配置
总结
- <font color="red">命令：（此命令会根据配置文件生成 打包后的文件夹（0配置情况下默认生成dist/main.js））</font>
npx webpack
- 不需配置也可以使用
打包工具 -> 输出后的结果 (js模块)
打包目录 src文件夹下的index.js
打包 (支持我们的js的模块化)
流程
新建 src/index.js
image
执行命令npx webpack 打包
image
-
npx webpack这个命令
（会去找.bin下面的webpack.cmd文件，这个文件又会去找webpack.js）
（可以看到webpack.js里会依赖webpack-cli，不安装会报错）
image
结果 命令执行后会自动生成dist/main.js混淆压缩文件
image
新建 html引用打包后的结果并启动：
（webpack以当前js为准，查找所有引用的js模块，生成一个js文件）
启动命令如下，未安装的可自行搜索live-server
live-server
image
image
手动配置webpack
总结
- 默认配置文件的名字 webpack.config.js
//webpack node语法
let path = require('path') //node内置模块
module.exports = {
//模式 有production和development两种,production最后生成的出口文件是混淆压缩的，developement是便于调试的
mode: 'development',
entry: './src/index.js', //入口文件 webpack会以此文件，查找依赖，并打包
output: { //出口配置 打包后生成的文件
filename: 'bundle.js',//打包后生成的文件名
//文件路径 此路径是一个绝对路径，path的这个方法会找到此绝对路径，放在名为build的文件夹下(没有build文件夹的话会生成一个)
path: path.resolve(__dirname, 'build')
}
}
流程
项目根目录下创建配置文件webpack.config.js
<font color='red'>书写配置（！各配置意义）</font>
image
创建./src/a.js并引入到./src/index.js中
image
执行命令 npx webpack 打包
启动查看结果
image
(webpack.config.js是默认的文件夹名称，来源在以下文件，可否修改此名称？后续进行详解)
image
