webpack简单教程--从零开始搭建一个webpack小例子
Posted BetiaStar
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack简单教程--从零开始搭建一个webpack小例子相关的知识，希望对你有一定的参考价值。
基于Windows操作系统下搭建webpack的运行环境，这里采用npm环境，node.js官网下载最新版本的，
这里忽略下载和安装，然后直接运行 Node 环境，如下图所示。
检查一下，node版本和npm工具的版本确保是最新的，这里并不是最新版本的，
如果版本都是最新的，那么就可以来直接搭建webpack一个小demo案例。
1、在F盘中创建一个文件夹webpack
2、在文件夹中创建index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack demo</title> </head> <body> <script src="bundle.js"></script> </body> </html>
3、创建index.js
alert("webpack运行成功");
4、创建webpack.config.js
module.exports = { entry: \'./index.js\', output:{ filename:\'./bundle.js\' } }
5、在文件夹空白处 shift + 右键 ，选中在此处打开命令窗口
6、在命令行中输入 npm init 设置你的项目信息。（这里直接 Enter到结束或者输入命令 npm init -y） 这里推荐使用 npm init -y
7、在命令行中输入 npm install webpack --save-dev （局部安装--推荐） 也可以全局安装 npm install webpack --g
8、在命令行中输入 webpack ,看到下图就可以打开我们的index.html页面， 可以看到弹出 “webpack运行成功”。
9、如果我们想引入JQuery,那么就在命令行中输入 npm install jquery --save
10、引入JQuery后，index.js添加并使用
alert("webpack运行成功");
var $ = require("jquery");
alert($);
11、在命令行中输入 webpack ,刷新页面就可以看到弹出的信息。
从上面可以看出，只要你修改一次就要在控制台中输入一次webpack命令，那么有没有能够替代他的高效命令工具呢，答案是有的，就是用webpack-dev-server服务，
只要在命令行输入 npm install webpack-dev-server --save-dev 进行安装。
12、安装好后,就可以使用了，在命令行中输入 webpack-dev- server服务启动后会有提示本地访问路径一般是http://localhost:8080/ ，根据提示在浏览器中输入http://localhost:8080/index.html 就 可以访问到页面，然后修改一下index.js 里面的代码，这样保存好后 ，页面就能自动刷新。
注意：如果在使用 webpack-dev- server 的同时，有其他软件已经使用了8080端口的话，可以在 “node_modules\\webpack-dev-server\\bin“ 找到 webpack-dev-server.js
打开后找到如下图进行修改
以上是关于webpack简单教程--从零开始搭建一个webpack小例子的主要内容，如果未能解决你的问题，请参考以下文章
webpack系列从零搭建 webpack4+react 脚手架