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

来源：互联网发布：js舞蹈培训中心靠谱么编辑：程序博客网时间：2024/05/19 23:09

在此之前，也用着很多脚手架来搭建项目，但是都是蒙蔽的，原谅我是一个菜鸟，今天就来仔细给大家说下具体过程，仔细到你真的懂了。
话不多说，直接搞事情
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$/,//支持正则                //定义加载器                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后面有一个空格的。

“`

阅读全文

0 0