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:

  }

}

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

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

下载webpack本地版本
npm i install webpack@3.6.0 --save

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

webpack@3.6.0和webpack-dev-server@2.8.0可以一块使用不会出现兼容问题

删除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

秒客网

Webpack配置及使用

相关文章