在这之前对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环境了
网友评论