webpack安装过程

webpack打包步骤

1.安装node 因为webpack是基于node的一个打包工具
2.安装好后在 命令提示符（win+R）里输入npm -v和node -v来检查是否安装完成
记得npm -v之间是有空格的！！！ 之前因为没有打空格 一直以为没有安装成功o(╥﹏╥)o）
3.全局安装webpack 输入命令npm install -g webpack
4.初始化npm 输入命令npm install 一直按回车到（yes/no） 回复yes 初始化完成 此时根目录下会多一个node_modules 同时也生成package.json文件
5.安装webpack-cli
6.输入命令 webpack .\src\index.js .\dist\bundle.js 回车打包index.js
（此时dist下生成bundle.js 这一步我弄了好久才打包好
注意：1.index.js和index.html是在src下一级
2.在webpack.config.js文件中要确保输入文件和输出文件没有错误 我用的是官网的配置方式
很多学习视频应该是用main.js不是index.js）
3.我的index.html引入路径用官网的
6.我们可以认为，webpack-dev-server把打包好的文件以一种虚拟的形式，托管到了项目的根目录中，虽然看不见，但是可以认为是和src node_module等平级
7.在每次修改完package.json后要重新输入命令npm dev run 现在只要一保存就会自动帮我们打包
8.终止批处理操作快捷键（ctrl+c）
9.“dev”: “webpack-dev-server --open --port 3000 --contentBase src” --open是每次打包完后，会自动帮我们打开页面 --port 3000是改变我们的端口号 --hot为不刷新页面加载（避免多次请求服务器）在css样式改变时表现比较明显 不生成新的bundle.js而是直接加进去

安装了好几天才弄好，不知道其他大佬是怎么样滴，出现了很多问题，找了很多别人的解决方法终于弄好了。多查多看命令提示，相信大家都能成功解决啦啦啦