1 安装webpack

在开始为项目加入构建之前，需要先建一个web项目，新建一个目录，再进入项目根目录执行npm init 初始化最简单的采用了模块化开发的项目。

安装webpack到本项目

安装最新的稳定版:npm i -D webpack
安装成功后出现以下界面：
webpack入门
文件目录也有以下文件：

我们可以用vscode打开当前目录，输入npm install --save-dev webpack-cli -g安装脚手架。然后，现在目录如下所示：

这里输入运行指令 webpack ./src/show,js ./build/bundle.js 会报错，报错如下：

这个原因是因为webpack的版本过高，换了命令，命令如下：
webpack入门
运行之后，目录会新增一个build的文件夹，此外可以修改package.json的scripts的部分:
“scripts”: {
“build”: “webpack ./src/show.js -o ./build/bundle.js”
},

2 创建项目

按照以上的步骤我们可以创建项目，总体目录如图所示。
webpack入门
show.js里面写的具体函数：

main.js是入口文件：

新建一个webpack.config.js，代码如下所示：

而index.html的界面如图：

输入webpack即可运行webpack构建，如果看到以下界面，就是运行成功。

现在，可以打开index.html，即可看到输入的那一句话“hello,webpack”

2.1 使用Loader

什么是Loader?最通俗的解释就是webpack可以通过它对css进行解析，我们将这个项目的文字写在最中间，设置样式#app{text-align:center;}，在main.js中也要引入文件，输入require(’./main.css’);
这时候直接运行webpack，会报错，因为webpack不原生支持css文件，所以，我们要引入Loader:
npm i -D style-loader css-loader
然后，重新配置webpack.config.js的文件，配置修改如下：
webpack入门
再输入webpack重新执行构建，即可看到文本在浏览器的中心出现。

2.2 插入插件

Plugin是扩展webpack功能的，通过在构建流程里注入钩子实现，受限，我们来安装依赖：
npm i -D extract-text-webpack-plugin
这里通过Plugin将注入bundle.js文件里的css提取到单独的文件中，配置修改如下：
webpack入门
这里，又有一个坑，重新构建，会报错，经过排查发现是由于extract-text-webpack-plugin目前还没有webpack4版本。可以使用该方式npm install [email protected]解决
然后以上代码，webPack 升级到 4.x导致extract-text-webpack-plugin 无法使用，webpack4.x包含了contentash这个关键字段，所以在xtractPlugin中不能使用contenthash，使用md5:contenthash:hex:8替代，代码如下所示：
webpack入门
再重新构建，就ok了，我们就可以看到我们的左边目录出现了css的文件，如图所示：

这时候，bundle.js里面就没有css代码了，我们再将代码引入index.html中就可以了。

2.3 使用DevServer

DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动webpack，并接收webpack发出的文件更改信号，通过websocket协议自动刷新网页做到实时预览。
我们开始来使用DevServer:
npm i -D webpack-dev-server
安装成功后，输入webpack-dev-server，会出现一串日志，这意味着DevServer启动的HTTP服务器监听在8080端口，我们可以访问这个网址，来获取index.html，但是，这里会出现页面空白，Devserver并没有把文件输出到build目录，而是在内存中。所以，我们要修改index.html，如下：
webpack入门
这里又有一个坑，这里安装了webpack-dev-server，会报错，解决方案就是全局安装webpack-dev-server，以下所示：
npm install -g webpack-dev-server，运行成功界面如下所示：

然后，http://localhost:8080/index.html，访问即可。
现在就可以自动刷新了，你可以修改main.js、main.css、show.js中的任意文件，保存之后，浏览器自动刷新。

模块热替换：是相对于默认的刷新机制能提供更快的响应速度和更好的开发体验，默认为关闭，要开启模块热替换，我们只需在启动DevServer时带上–hot参数，重启DevServer即可。
支持Source Map，映射代码，在源代码上断点调试，在启动的时候，加上–devtool source-map的参数，重启DevServer刷新界面，再打开谷歌浏览器开发者工具，就可以在sources栏看到可调试的源代码。

webpack入门