Webpack

webpack

　　是一个前端资源加载/打包工具

　　常见的资源：图片，视频，css，js，json等

　　它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

第一步：下载

　　　　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会有一个默认的配置文件，叫webpack.config.js

　　　　

　　　　　接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件　

第三步：

　　添加热加载，改变文件的内容，按保存，就会自动刷新

　　 webpack-dev-server@2.9.4

　　注意：

　　　　webpack是3.8.1，这个轻量服务器就得是2.9.4

　　　　如果webpack是4.0版本，这个dev-server就得是3.0版本

　　指令：

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

　　　　npm install --save-dev webpack-dev-server@2.9.4　　　　　　　开发环境下载

　　webpack-dev-server启动就行

　　　　这种启动只是启动服务器，但是不能自动刷新

　　webpack-dev-server --hot --inline

　　　　这种既可以启动服务器，也可以让浏览器自动刷新

　　配置启动指令：

　　　　在当前项目下的package.json中将scripts改了

　　　　

　　　　  注意：

　　　　　　就是在这个服务器下生成的虚拟的bundle.js

　　　　　

　　　　　　这个虚拟的js文件由配置文件决定的，但是他和html是同目录的同级别关系，所以引入关系需要注意

　　　　      

　　　　　　注意：最后完成bundle.js是虚拟的，完成后改真实的路径

打包css文件

　　loader依赖包

　　指令： npm i css-loader style-loader --save -dev

　　css转成js less 转成js

　　json转成js png转成js 而loader就能解决这些问题的

　　css文件打包到js中 需要 style-loader ！ css-loader

　　

 

转载于:https://www.cnblogs.com/xiaotaiyangye/p/10973636.html