webpack简单教程(1)--从零开始搭建一个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

打开后找到如下图进行修改

posted @ 2017-08-26 12:53 Tsingtree 阅读(576) 评论(0) 编辑收藏举报

刷新页面返回顶部

BetiaStar

webpack简单教程(1)--从零开始搭建一个webpack小例子

公告