webpack

webpack 3.8.1版本

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

　　webpack的使用方法：

　　　　第一步：下载

　　　　　　npm install -g webpack@3.8.1

　　　　　　　npm install webpack@3.8.1 --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版本(Webpack-dev-serve@2.9.4)，如果webpack是4.0版本这个dev-server就得是3.0版本

　　　　　　　全局下载指令：webpack-dev-server   npm install -g webpack-dev-server@2.9.4

　　　　　　　在开发环境下下载指令：npm i --save-dev webpack-dev-server@2.9.4

　　　　　　　直接使用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 

 

转载于:https://www.cnblogs.com/wang2000/p/10976050.html