node搭建本地服务器(nodejs安装步骤)

zzxiexin 4 0

1、webpack提供了一个可选的本地开发服务器(修改的文件先存储在内存中),这个本地开发服务器基于node.js搭建的,内部使用express框架,可以实现我们想要的浏览器自动刷新显示我们修改后的结果,就避免了我们每次修改了代码都要执行npm run build进行打包动作,界面上才会更新我们修改的东西。

2、环境安装:cnpm install webpack-dev-server@2.9.1 --save-dev

3、配置环境属性:

contentBase:为哪一个文件夹提供本地服务器,默认是根目录,而我们这边需要指定目录:./dest

port:端口号(可以不指定,默认为8080端口)

inline:页面实时刷新

historyApiFallback:在SPA页面中,依赖HTML5的history模式

4、运行服务:webpack-dev-server,最后完成修改再通过npm run build将项目打包成物理文件。

为了简化命令,同时让项目在本地找此命令(安装是没有选择全局变量,如果不配置,直接执行,会报错说此命令不存在,因为安装时是局部安装,所以全局是找不到此命令的):

PS: --open 的命令是在你执行完npm run dev命令时直接就打开浏览器进行预览了。

这样运行后,更新的代码是先保存内存中,并未直接生成物理文件:

此时直接访问本地服务器的地址即可。

5、配置文件的分离:然而,在开发时,不需要进行js代码的压缩,这样不利于代码调试,在真正项目打包的时候再进行代码压缩;同时,在正式打包项目的时候,本地服务器的配置也是不需要进行打包的。所以,可以把这些配置文件进行分离:将开发时跟发布需要的进行分离

首先,创建一个新的配置文件:base.config.js文件,然后将webpack.config.js里面内容全部拷贝过去,注释或删除掉开发、项目打包需要的配置,留下基本的配置内容:

然后新增两个配置文件:dev.config.js(开发需要的配置)和prod.config.js(打包发布需要的配置)分别满足开发及打包发布时的配置文件:

开发需要的配置文件:

项目打包需要的配置文件:

接下来,在开发的时候将 base.config.js 与 dev.config.js 文件进行合并编译,在项目打包的时候则将 base.config.js 与 prod.config.js 文件进行合并编译,但是,做这个动作需要merge(合并)命令进行辅助编译,所以我们需要安装此环境:cnpm install webpack-merge@4.1.5 --save-dev

安装成功后,在dev跟prod两个配置文件中导入此环境,然后通过此命令进行合并:

合并prod的内容:

最后在build 跟 dev 中指定需要执行的目录文件即可:

PS:此时配置完后,原来的webpack.config.js文件就可以删除不用了。

但是,此时去打包项目文件的时候,发现打包文件被打包到build的目录下了,并没有将文件打包到根目录下的dist文件夹里面:

原因是base配置文件在build目录下,所以编译的时候在本目录下增加一个dist文件,所以要修改dist文件的生成目录:将 dist 改为 ../dist :

最后重新再打包项目,则将文件正常生成在根目录下的dist文件夹中。

标签: #node搭建本地服务器

  • 评论列表

留言评论

 
QQ在线咨询
售前咨询电话
173-175-32776
技术支持电话
173-175-32776
嘿,欢迎咨询