webpack安装和使用
mkdir webpack_demo cd webpack_demo //npm初始化 npm init //然后一直回车
安装webpack
// 不建议全局安装 cnpm install webpack --save-dev // --save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。
然后问题就出现了，安装失败
提示大概是某个资源被占用了，我是打开了webpack_demo这个文件夹，关闭后重新安装就可以了
如果此上面的方法不行可以尝试
1.
可以清除npm缓存 执行命令 npm cache clean --force
2.
关闭cmd，重新以管理员身份运行，还是不可以可以换npm安装
可以清除npm缓存 执行命令 npm cache clean --force
可以开始学习了，先建一个测试项目
1.目录结构
| dist - index.html | node_modules | src - index.js
2.完善文件内容
// index.js import _ from 'lodash'; function component() { var element = document.createElement('div'); // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的 element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
// index.html <!doctype html> <html> <head> <title>Getting Started</title> </head> <body> <script src="./bundle.js"></script> </body> </html>
3.执行命令
// 执行命令 $ npx webpack src/index.js --output dist/bundle.js
这里提示安装 webpack-cli
是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli：
// 安装webpack-cli cnpm install webpack-cli --save
但是结果报错了，尝试不同的安装方法，最后提示删除node_modules重新安装，全部重新安装一下就可以了
重新运行命令：npx webpack src/index.js --output dist/bundle.js
C:UserswaisoDesktopwebpack_demo>npx webpack src/index.js --output dist/bundle.js Hash: e15bb286b37347af5a92 Version: webpack 4.30.0 Time: 14877ms Built at: 2019-04-28 11:25:10 Asset Size Chunks Chunk Names bundle.js 70.3 KiB 0 [emitted] main Entrypoint main = bundle.js [1] ./src/index.js 279 bytes {0} [built] [2] (webpack)/buildin/global.js 472 bytes {0} [built] [3] (webpack)/buildin/module.js 497 bytes {0} [built] + 1 hidden module WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
// 有一个警告
// 说'mode'没有定义，这是 webpack 4x 引入的，有两个值，development 和 production。默认是production.
由于webpack 默认的入口文件是从./src/index.js,输出是./dist/main.js 。因此可以直接npx webpack --mode development
C:UserswaisoDesktopwebpack_demo>npx webpack --mode development Hash: 28727f4b342f5cb8a364 Version: webpack 4.30.0 Time: 1685ms Built at: 2019-04-28 11:29:10 Asset Size Chunks Chunk Names main.js 551 KiB main [emitted] main Entrypoint main = main.js [./node_modules/_webpack@4.30.0@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built] [./node_modules/_webpack@4.30.0@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built] [./src/index.js] 279 bytes {main} [built] + 1 hidden module