您的位置：首页 > Web前端 > Webpack

手把手教你用webpack来搭建一个项目

2017-10-30 00:29 274 查看

在此之前，也用着很多脚手架来搭建项目，但是都是蒙蔽的，原谅我是一个菜鸟，今天就来仔细给大家说下具体过程，仔细到你真的懂了。

话不多说，直接搞事情

1.首先需要node的环境，如果你到这里来了，证明你已经都有node的环境了。

安装npm install –global webpack 这个是webpack环境

npm install webpack-dev-server 这个是webpack中的一个服务器

大概安装玩这些。直接在cmd中输入回车完事。当然你可以全局安装，加上-g即可

我们建一个一个文件夹webpackdemo 你可以建立在任意文件夹下。然后在webpackdemo文件下建立一个gogo文件夹，我们在这个文件夹下面开始写代码了。

首先建立一个index.html文件

代码如下

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<script src="./demo/desc.js"></script>
</body>
</html>

上面的css和js引用先不说你照着弄即可，等下解释。

2.然后建立一个webpack.config.js

代码如下：

module.exports ={
//入口文件
entry:"./js/app.js",
output:{
/*这个文件就是我们打包出来要用的js文件。
意思也就是我们最后只要在index.html中引用这个文件，webpack会将我们在app.js       中所有代码打包成一个文件，
*/
filename:'./demo/desc.js'
},
//加载css文件
module:{
loaders:[
{
//匹配规则
test:/\.css$/,//支持正则

4000
//定义加载器
loader:'style-loader!css-loader'
}
]
},
}

看上面的目录你应该知道了。我们需要在gogo文件夹下面建立一个demo文件夹和app文件夹。再在demo文件夹下面建立一个desc.js文件和在app文件夹下面建立app.js文件。以前我看别人的就是文件夹分不清楚，导致项目跑不起来。大佬可以跳过，纯属于给入门看的。

文件目录样子

–webpackdemo

–gogo

–demo

desc.js

–app

app.js

– webpack.config.js

2.我们需要安装 npm install webpack-dev-server 来开启一个服务期，

如果你上面安装了这里就不用再次安装。

我们在app.js中随便写点内容即可

代码如下

document.write("<h1>222222</h1>");

我们在命令行里面输入webpack将我们的app。js文件打包。

这里你直接点击index.html文件运行，说白了就是双击打开，

下面我们来说下用webpack-dev-server 服务器的方式打开

然后在gogo文件夹下面打开命令窗口，最简单的方式就是shift+鼠标右键，点击在此处打开命令行窗口即可。输入webpack-dev-server

我们的项目就会跑起来，他会给你一个端口。一般是http://localhost:8080

命令行里面都有，如果你的端口被占用，他会自动往后加+1

当然端口我们可以自己配置，这里就不说这个了。

这样在浏览器打开对应的地址我们就会看到2222222222.

原谅我们小学毕业，有很多地方写的不专业，能看懂就好，如果你看懂了。顶一下。

这里还有一个小白遇到的问题。目录切换问题，我只说最简单错报的方式

比如你要进入D盘。首先我们的命令窗口打开都是在

C:\User/Administrator>这个样子。

直接进入D盘。命令如下D:回车即可，其他盘也是这样。如果好要进入D盘下面的某个文件夹

当我们按下回车样子是这样的

D:>

不管你要进入那个盘，比如D盘下面还有一个demo文件夹，我们找到demo 这个文件夹，在下面一样输入cd D:\demo 即可；

我个人是cd 空格之后直接帮demo这个文件夹拖入黑窗口，省去了打不步骤，

之所以更深的目录，只要进入到主盘（D: F: E: ）这些，直接找到要你打开的文件夹，cd 直接帮那个文件夹拖入进来。cd后面有一个空格的。

“`

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航