之前写Vue项目的时候，简单接触了一下Webpack。当时的理解就是打包工具，没有过多的深入研究。这几天属于找工作状态，顺便学习了一下Webpack，这里简单说下如何安装和配置。

这里安装的话需要先安装一下Node.js，如果你还没有安装的话，这是官网：https://nodejs.org/en/

不太清楚的朋友，命令行执行命令： node -v  检查一下

好像不小心暴露了我强大的戴尔电脑

安装命令：npm install webpack -g     安装在全局(我的电脑永远这么慢，一分钟才安好)。

但是我太建议安装全局，万一你换了电脑，电脑上有已经全局安装好的webpack，冲突了怎么办？

最好的办法还是在当前文件夹下面安装。

先执行命令：npm init -y  先生成一个package.json文件，有了这个文件，npm就会认为你的整个项目是一个模块了。

因为是局部的，这里就不写全局的 -g了，要写 -D  其实就是  npm install webpack --save-dev  

至于为什么要写--save-dev，你看看package.json的内容就明白了。

咳咳，这里说明一下，因为我之前创建Vue项目，已经全局安装Webpack了，所以这里写的小练习，就不安装全局了。这里需要手动添加一个js文件，叫做webpack.config.js

内容是：

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }

};

配置文件写好后直接运行webpack即可。

打包成功后，目录中会生成一个dist文件夹，里面就是打包后的js-----bundle.js

这时候，看看app.js的内容，在主页引入打包后的js是否生效。

结果：

好的，结果很完美，生效了。

Webpack官网：https://doc.webpack-china.org/