webpack 作为前端的代码整合，模块打包工具，使用频率非常之高！之前只用到npm run dev ,npm run build
但没有参透其中的逻辑和道理，以至于优化编译的时候就是一脸懵，只能悻悻的等着大佬们去解决问题。
在百度了“wepback入门*”文章之后。。。发现，并不是终极小白可以看的懂的，或者说看起来还是很费劲。因为中间省去了很多npm 模块和创建基础的文件过程。
因此！我还是自己再写份总结出来比较靠谱。。。
webpack 学习前提：
node，npm 已躺在你的环境里 安装步骤不在这里赘述了（诶？我也有不想写详细的地方。。毕竟这个基础可以写到node终极小白里=。=！）
接下来：
1. 全局安装 webpack
npm install -g webpack
2. 创建一个空文件夹 命名 webpackTest
npm init
初始化一个node项目里面包含package.json （只有包含package.json文件才能安装node_modules）
3. 安装到项目目录
npm install webpack --save-dev (cnpm 也可以）
4. 安装 webpack-cli
* 百度得知：webpack4，全局安装cli之前webpack寻找不到webpack命令,webpack 和webpack-cli 分开管理
npm install -g webpack-cli
官方文档中推荐本地安装并且提示，当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。
把webpack-cli全局安装卸载掉，然后进入路径node_modules/.bin/webpack就可以执行了，如下：
这就意味着如果你webpack和webpack-cli是局部安装的，想要使用webpack命令必须进入node_modules/.bin/webpack才能执行webpack命令，.bin目录包含的是一系列可以执行的命令，但是如果你是全局安装的webpack-cli，就不需要进入bin目录，webpack就能够寻找到它的命令路径了
5. 浏览器监听代码修改
npm install --save-dev webpack-dev-server
"server": "webpack-dev-server --open"
"server": "webpack-dev-server --open"
6. Loaders
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置
题外话： path.join & path.resolve
path.join('/a', '/b')
path.resolve('/a', '/b')
path.resolve([from...], to) // 返回相对当前目录的绝对路径
from 源路径
to 将被解析到绝对路径的字符串
网友评论