学习webpack搭建vue环境的过程以及坑

在这之前对webpack模模糊糊，也不知道其中的各种配置是什么意思，只是用过vue-cli自动构建过。所以就想着自己探讨下，有好多不成熟之处 算是个小小的入门。
首先新建了一个文件夹 随意起个名字 这里是jianshu
使用npm init就会弹出一些信息，直接默认就行，结束之后就会自动新建一个package.json文件，里面主要是一些依赖包的信息。
先确定项目的整体目录结构：

我的学习项目目录

dist文件夹里面就是打包后的文件，src就不用说了 是源码
我在index.html里面引入打包后的bundle.js文件，入口是main.js

现在在main.js里面动态创建一个P标签加上内容比如 “快快显示出来” 再加到浏览器上（哎呀，反正就是dom操作嘛）现在就是要通过打包来让这个文字显示在浏览器上。

这个时候就新建一个名字为webpack.config.js文件 ，在里面配置文件的入口文件以及产出目录和文件名字

module.exports = {
    mode: 'none',
    devtool: 'eval-source-map',
    entry: __dirname + '/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
}

devtool参数选项官网上有。我懒得写了。。
然后这个时候在package.json文件里面设置如下：

image.png
即可通过npm start进行打包了。这个时候打开dist
就可以看到打包后生成的bundle.js文件了。打开index.html就可以看到写的内容了“快快显示出来” OK啦

这个时候如果改了某个文字 就需要重新打包，实在是不方便。所以就需要webpack-dev-server来帮忙啦，需要在webpack.config.js里面配置一下。

image.png
相关配置选项
然后在package.json里面配置一下开启服务的命令就行啦
配置
然后在终端下运行npm run server就可以开启服务器监听了，修改文章内容就可以自己刷新了

这里有个问题没懂，问下大佬们：
我的index.html文件里面引入的bundle.js路径是<script src="bundle.js"></script> 才能实现同步刷新 。但是诡异的是我打包之后的文件在dist目录下呀。。。。<script src="dist/bundle.js"></script>这样的路径就不能自动刷新啊！！什么鬼？？？？？

这里安装好多包我没写出来，一般会失败了会提示装什么，按照错误装相应的包就OK！

webpack部分结束 接下来就是搭建vue环境了