总结 webpack 的插件

　　模块化第一步  初始化 package.json 文件

　　node.js　　指令　　npm init

　　npm的官网：https://www.npmjs.com/　　 搜索插件名，查看插件的用法

　　1.　webpack 虽然并没有什么突出的地方，但是他的插件却非常多且好用；

　　　　　　npm node包管理工具，可以对包进行 增 删 查 改

　　　　　　下载 npm 包的指令　　npm install 包名

　　2.　cnpm 淘宝 npm 镜像：与 npm 一样，但是比 npm 下载的快

　　　　　　指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　3.　利用 browserify  对 js 文件，进行打包编译

　　　  　　下载指令：npm install browserify --save-dev

　　　　　　打包指令：browserify 主文件>要打包的文件

　　4.　利用 package.json 文件，恢复之前所下载的包

　　　　　　指令：npm install

　　5.　webpack 可以对前端资源进行打包　　（前端资源：js css json 图片均可打包）

　　　　　　下载指令：npm install webpack@3.8.1 --save-dev　　（--save-dev：开发环境， @指令版本号 ）

　　6.　webpack-dev-server 可以通过ctrl+s 来进行实时刷新的插件

　　　　　　下载指令：npm install webpack-dev-server@2.9.4 --save-dev　　(webpack的附属产品，要比webpack第一个大版本，如 webpack 是3点多的版本，他的附属产品只能的2点多)

　　　　　　实时刷新指令：webpack-dev-server --hot --inline

　　7.　如果只想用 webpack 来实现一键打包，我们需要在当前目录下，创建一个 webpack.config.js 文件

　　　　　　文件内容的配置：https://www.cnblogs.com/shangjun6/p/10980093.html

　　8.　如果我们想 通过一个指令来跑我们的 node.js，我们只能通过 package.json 文件

　　　　　　指令：npm run dev

　　　　　　文件内容的配置：https://www.cnblogs.com/shangjun6/p/10980087.html

　　9.　想要去改相对路径变成绝对路径 我们需要用到 node 自带的插件；

　　　　　　指令：var path=require("path");

　　　　　　用法：path.resove()　　方法，参数一：必填：dirname（当前目录） 参数二：必填："./指定目录下" 　　在 webpack.config.js中操作

　　10.　要自动打开浏览器的插件：open-browser-webpack-plugin

　　　　　　下载指令：npm open-browser-webpack-plugin --save-dev

　　　　　　文件内容的配置：官网搜 open-browser-webpack-plugin

　　11.　配置服务器：通过 devServer 属性  在webpack.config.js 文件，接口 module.exports={} 中

　　　　　　指定跟目录：contentBase:

　　　　　　指定端口：port:

　　12.　打包图片的插件

　　　　　　指令下载：npm install url-loader --save-dev　　主要是针对 css 打包的背景图，不好用

　　　　　　插件用法：官网搜 url-loader

　　13.　打包 css 的插件

　　　　　　指令下载：npm install style-loader css-loader --save-dev

　　　　　　插件用法：官网搜 css-loader

　　14.　打包 json 的插件

　　　　　　指令下载：npm install json-loader --save-dev

　　　　　　插件用法：官网搜 json-loader

　　15.　打包 es6 插件（将 es6 转为 es5 ）

　　　　　　指令下载：npm install -D babel-loader @babel/core @babel/preset-env

　　　　　　插件用法：官网搜 babel-loader

　　16.　将 css 与 js 分离的插件

　　　　　　指令下载：npm install extract-text-webpack-plugin --save-dev

　　　　　　插件用法：官网搜 extract-text-webpack-plugin

　　17.　less的配置：（es6写法的css文件）

　　　　　　指令下载：npm install less less-loader --save-dev

　　　　　　插件用法：官网搜 less-loader

　　18.　查看 node 的版本

　　　　　　指令：node -v