webpack的使用

1、webpack使用基本

1. 首先需要 全局安装 官网都有 这里就不多说了

npm install webpack -g
//  需要4.0再装个cli
npm install --save-dev webpack-cli

   2.创建个项目 

// 初始化
npm init -y
//  需要有个 webpack.config.js

// 然后里面
// main.js 入口文件
const path = require('path')

module.exports = {
  entry: path.join(__dirname , './src/main.js'),  // 入口 表示要使用webpack打包哪个文件
  output: {
    path: path.join(__dirname, './dist'),  // 指定打包好的文件输出到哪里
    filename: 'bundle.js'  // 指定输出文件的名称
  },
  externals: {  // 不编译某些模块 可引入cdn
    jquery: 'jQuery'   
  }
}

2、实现实时编译更新功能

（1） 直接在 package.json中一句话

//  首先需要安装 webpack-dev-server  插件,但是只安装这个不行，因为它依赖 webpack这个插件所以
npm install webpack-dev-server -D
npm install webpack -D
npm install webpack-cli -D // 4.0版本需要在安装这个cli 否则报错

在 package.json 中配置

// 实现热更新 和更改端口
"dev": "webpack-dev-server --open --port 3000 --hot"

（2）第二种方式麻烦

"dev": "webpack-dev-server"// 首先在 webpack.config.js 中配置devserver
如下图

3、html-webpack-plugin 的使用

1. 先安装

 npm install html-webpack-plugin -D

  2、导入在webpack.config.js 里

4、处理 css文件的 loader 文件 style-loader css-loader

1. 先安装

// 首先安装
npm install style-loader css-loader -D

    2、在webpack.config.js 里配置

module对象身上有个 rules属性，这个rules属性是个数组，存放了所有第三方文件的匹配和处理规则

  这些loader调用规则从右到左 即 css-loader -> style-loader

5、处理 less文件 less-loader

1、先安装

npm install less-loader -D
npm install less -D

2、在webpack.config.js 里配置

这些loader调用规则从右到左 即 less-loader ->css-loader -> style-loader

6、处理 scss文件 scss-loader

1、先安装

npm install sass-loader -D
npm install node-sass -D

2、在webpack.config.js 里配置

这些loader调用规则从右到左 即 sass-loader ->css-loader -> style-loader

7、处理图片 的loader  url-loader file-loader

1、先安装

npm install url-loader file-loader -D

2、在webpack.config.js 里配置

3、图片会被转为base64 如何不转呢？ 上面的 30是 30字节，

给传参 limit值，如果图片小于limit值，会被转为base64，如果>=则不会转为base64

8、处理字体文件的

9、重要的 es6+ => es5 bable-loader

1、先安装

npm insatll babel-core -D
npm install babel-loader -D
// 注释 babel-loader@71.15  8.0版本报错
npm install babel-preset-es2015 -D

2、建立.babelrc 文件

3、在webpack.config.js 里配置