webpack

概述webpack 3.8.1版本 　　webpack是一个前端资源加载或者打包工具。 　　webpack的使用方法： 　　　　第一步：下载 　　　　　　npm install -g [email protected] 　　　　　　　npm install [email protected] --save-dev  局部下载 　　　　　　　下载尽量把全局和局部都安装上 　　　　第二步：打包js文件 　

webpack 3.8.1版本

　　webpack是一个前端资源加载或者打包工具。

　　webpack的使用方法：

　　　　第一步：下载

　　　　　　npm install -g [email protected]

　　　　　　　npm install [email protected] --save-dev  局部下载

　　　　　　　下载尽量把全局和局部都安装上

　　　　第二步：打包Js文件

　　　　　　输入指令： webpack    入口文件名        出口文件名

　　　　　　　　　　例： webpack        Js/a.Js        dist/bundle.Js

　　　　　　　如果我们只想使用webpack这个指令的情况下，就需要完好打包配置webpack.config.Js

　　　　　　　webpack.config.Js文件是webpack的一个默认的配置文件

　　　　第三步：添加热加载：改变文件内容，按住保存，就会自动刷新

　　　　　　　注意：如果webpack的版本是3.8.1  这个轻量级服务器就得是2.9.1版本([email protected])，如果webpack是4.0版本这个dev-server就得是3.0版本

　　　　　　　全局下载指令：webpack-dev-server   npm install -g [email protected]

　　　　　　　在开发环境下下载指令：npm i --save-dev [email protected]

　　　　　　　直接使用webpack-dev-server启动：这种启动只是启动服务器，不能自动刷新

　　　　　　　webpack-dev-server --hot --inline：既可以启动服务器也可以让浏览器自动刷新

　　　　　　　配置启动指令：在当前项目下的package.Json中将"script"对象里的内容改为，如下图

　　　　　　　　　　　

　　　　　　　注意：这个服务器下生成的虚拟bundle.Js，如下图

　　　　　　　　　　

　　　　　　　　　　这个虚拟Js文件由配置文件决定的。但是他是和app.HTML同目录同级别关系。所以引入关系需要注意，如下图

　　　　　　　　　　

　　　　

　　　　　打包CSS文件

　　　　　　　　Loader:依赖包

　　　　　　　　CSS转成Js， less转成Js， Json 转成Js png传成Js，  而loader就就解决这些问题的。

　　　　　　　　CSS文件打包到Js中 需要css-loader  style-loader 

总结

以上是内存溢出为你收集整理的webpack全部内容，希望文章能够帮你解决webpack所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。