一、webpack起步默认打包一般使用webpack的开头，会有个教程，
1.先npm init -y形成package.json，
2.然后装webpack和webpack-cli,之后创建一个如下的目录，--save-dev表示开发时使用，打包的时候不打进去，--save就打包也就进去了
包括./src/index.js，dist目录，
3.最后执行npx webpack，结果在webpack中就成成了一个man.js
其中这个npx webpack就是执行了node_modules中的webpack，他有一个默认的入口文件src/index,这个是必须有的，然后会有默认的结果文件dist/main.js，如果不创建dist目录，一样可以直接生成这个dist和dist内部的main.js。
二、webpack的配置开始
之后我们创建一个webpack.config.js，这就决定了我们以后要用这个文件来配置了webpack了，vue和react之类的脚手架一般也是间接通过webpack来实现配置的
1.配置入口文件和结果文件,其实还是跟默认的一样，然后执行npx webpack --config webpack.config.js 这就话就是指定了一定要用这个webpack.config.js，不过默认也会找这个名字的文件。你要是改别的名字，当然就要把名字指定换成修改后的名字
const path = require('path')module.exports = { entry:'./src/index.js', output:{ filename:'main.js', path:path.resolve(__dirname,'dist') } } 2. 配置一个npm scripts
之后就可以用npm run build来代替之前的npx webpack了。第一章节的起步就算完成了，第二章是一个资源管理，是配置一些loader和plugIn来管理css,图片资源,字体和数据，也没啥难度，就不说了，直接下一章，管理输出
这一节主要是解决了如果一个html 引用了多个入口文件，应该如何配置，
比如，src下多了一个print.js ,html中也引用到了这个print.js,
这时我们在webpack.json.js继续配置，
然后npm run build，可以在dist中生成对应的两个打包后的文件。
这时候就有问题了，要是我又引入了一个文件呢？那是不是还要在html中再加一个呢？这时候可以用一个plugin。
1 、HtmlWebpackPlugin，clean:true是每次都会清理dist文件夹，并且每次都会生成一个index.html,这个html就自动引入了所有的新加的文件
三、开发环境
这一章，主要是讲如何配置一个开发环境，包括了错误输出的映射，文件更改的监控，web-dev-server的启动一个服务
1.首先是要设置为开发模式
2.假如编译后的代码出错了，怎么找到错误呢？配置如下
加入没有配置看到的就是这样，这不能很清晰的找到是哪出错了
加入配置之后
不过这样每次还是要刷新浏览器才能更新，有没有别的方法呢？是有的使用webpack-dev-server
3.webpack-dev-server
install 一下web-dev-server，然后加入devServer的配置，将dist目录的serve到8080端口，但是并没有生成文件，都是在内存里，只有build打包了才能再dist中找到。然后我们添加一个新的npm 命令 start:webpack serve --open使用npm start就可以在8080下找到页面。最后下面的那个配置optimization:runtimeChunk的是表示一个页面同时引用多个入口文件引用会被实例化几次的问题。
标签：npm,文件,教程,dist,配置,起步,js,webpack From： https://www.cnblogs.com/1521681359qqcom/p/16587499.html