webpack模块打包器安装

首先新建一个文件夹，可以通过mkdir demo1创建一个文件夹，然后cd demo1进入该文件夹，在文件夹下初始化一下npm

初始化之后就可以在这个文件夹下开始装webpack

安装完之后我们就可以看到文件夹下有了package.json文件和node_modules文件，然后用编辑起打开安装目录，在目录下新建一个.js文件，接下来就可以编码了

接下来打包这个文件，一般是 webpack + 想要打包的文件的名称 + 打包完以后文件的名称，注意：如果webpack版本过高就不能使用上诉打包语句，否则会报错，由于我的webpack版本是4.35.2最新版，因此也不能使用，所以要更换打包命令，如下

虽然没有报错，但是还是出现了警告，下面就来解决这些警告，英语好的同学可以看出来，貌似是因为模式问题，接下来，找到package.json文件添加上"dev"和"build"这两个信息以及它们的值。

全局安装webpack-cli

安装完成后, 输入命令 npm run dev，又报错了！
百度了一下，终于在这位大佬的博客下找到了解决办法https://blog.csdn.net/LPLIFE/article/details/80650993

原因是，你输入命令 npm run dev 的时候，会默认打包src文件夹下的index.js文件，打包完成后是main.js文件(放在dist)，你有没有发现我们一开始安装webpack的时候并没有这个文件生成,所以更别提什么index.js文件了，所以这些我们需要手动创建。

知道解决办法就好搞了，就创建一个呗，果然大佬就是大佬，在运行npm run dev就成功了。

接下来在运行，webpack ./demo1.js -o demo.bundle.js --mode development，指定开发模式。这下可以看到我们已经打包好了。

下面我们来测试一哈，创建一个.html文件，文件中引入刚刚打包好的demo.bundle.js文件。

打开浏览器可以看到，hello world可以显示出来。

接下来我们在给它添加下css样式，新建一个.css文件，在demo1中引入通过require('./mycss.css')

我们继续打包会发现报错了，错误提示很明显告诉我们没有安装适当的loader，因为webpack天生是不支持打包css文件的。

那我们就去装一下，可以看到没有报错顺利装好。

不要忘了还要在.js文件中指定一下。

这样我们再去执行webpack ./demo1.js -o demo.bundle.js --mode development就没有问题了。

我们再来看打包好的文件，已经多出来了刚刚新建的.css文件。

但是，我们用浏览器查看.html文件发现字体颜色并没有改变，这是咋回事？？？
莫慌，不是大问题，是因为少写了一个loader把它加上就好了。（css-loader使得webpack可以处理.css文件，style-loader是把css-loader处理完的文件放的一个style标签里插入到html页面里）

再次，在控制台执行webpack ./demo1.js -o demo.bundle.js --mode development。

接下来刷新页面，我们设置的样式出来啦。

我们也可以通过命令行的webpack ./demo1.js -o demo.bundle.js --mode development --module-bind 'css=style-loader!css-loader'指定.

但是有没有觉得，每次修改都要重新打包很麻烦，webpack提供了一个–watch指令让每次修改完可以自动更新打包，执行一下，没有问题。

再去做一下修改，我们修改下显示的内容，再让它居中，看一下页面。

页面没有问题，再看下控制台，也自动打包了。

当然，webpack还提供了很多命令像--display-modules --progress等就不一一操作啦。