Webpack配置及使用

##如何将js模块化
### module.exports()
### module.require()
### 自定义文件，进入时需要./
### npm下载得到文件，不需要./

##如果使用第三方
### 1，在npm服务器中下载第三方文件
### 2，require()引用第三方文件

## 如果将静态文件模块化
### 1，创建css文件
### 2，下载对应的加载器
### 3，修饰我们的css文件 !css-loader

##如何配置webpack.config.js
### 出口文件 入口文件 模块 加载器

const path = require('path')
module.exports={
  //文件入口配置项
  entry:'./scr/index.js',
  //出口文件的配置项
  output:{
    //输出的路径，用了nodejs
    path:__dirname,
    //出入文件的名称
    filename:'bundle.js'
  },
  //模块 ：列入css，图片如何转换，压接
  module:{},
  //插件，用于生产模块和各项功能
  plugins:{},
  //配置webpack开发服务功能
  devserver:{
    //设置基本目录结果
    contenBase:__dirname,
    //服务器ip地址
    host:'localhost',
    //服务器压缩是否开启
   compress:true,
    //配置服务器端口号
    port:8082
  }
}

##如果使用package.json启动项
### scripts "build" "start"
##如果将es6转换为es5
### babel babel-core babel-loader@7 babel-preset-es2015

##如何将app.vue文件>=转换成正常代码
### [email protected] --save
##在vue文件中加载html，css，js
vue-html-loader css-loader

下载webpack本地版本
npm i install [email protected] --save

配置webpack服务器版本 //在我们需要请求数据与服务器交互时使用
npm i [email protected] --save-dev

[email protected]和[email protected]可以一块使用不会出现兼容问题

删除webpack
npm uninstall webpack -g
加载webpack
webpack app.js bundle.js
加载webpack并监听
webpack app.js bundle.js --watch
下载css模块
npm install css-loader style-loader -- save-dev
babel   //使浏览器兼容es6的语法
npm install babel-core babel-loader babel-preset-es2015 --save-dev

 ---------------------------------------------------------------------------------------------------------------------------------------------

npm操作命令

##安装(推荐局部安装)
npm install webpack -g //-g 代表全局安装
npm install webpack -s //-s 代表局部安装

#安装
npm install --save-dev webpack -s

#安装 webpack-cli
npm install --save-dev webpack-cli -s //局部安装

#创建backage.json文件
npm init -y

#安装 style-loader css-loader
npm i style-loader css-loader -s
#安装less的loader
npm install --save-dev less less-loader -s
#安装file-loader加载图片
npm install --save-dev file-loader -s
#安装url-laoder 加载字体
npm install --save-dev url-loader -s
#安装csv-loader xml-loader 加载数据（CSV、TSV 和 XML）
npm install --save-dev csv-loader xml-loader -s

#检查版本是否安装成功
webpack -v

##删除
#全局卸载
npm uninstall webpack -g

#局部卸载
npm uninstall webpack -s