关于webpack中babel插件的使用

1.为什么需要BABEL

webpack是不能解析es6语法的，需要用到插件来转化为es5和浏览器能识别的文件

2.NPM安装和配置

1.cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D 这里我使用的cnpm指令安装可以更快，尽量不要npm和cnpm指令混用，因为可能是npm删掉cnpm之前安装的包，，所以要么一直用npm或者cnpm。这个包核心是babel-loader和core，第二个是插件plugin，需要辅助用到。这里安装是7版本，一定要注意安装的版本，版本不对会导致问题
2.cnpm i babel-preset-env babel-preset-stage-0 -D 安装语法对应包，作用告诉babel解释成为什么格式和语法

3.安装好之后，要在文件的根目录建立一个文件.babelrc 这个是个json格式的配置文件，目的是告诉webpack我安装了这几个插件，所以里面写代码：{ "presets":["env","stage-0"], "plugins":["transform-runtime"] }

{
  "presets":["env","stage-0"],
  "plugins":["transform-runtime"]
}

• 我的目录结构：
  
  4.然后在config里面写配置文件：

var path=require('path')
//安装html-webpack-plugin来生成一个被嵌入了bundle.js的index文件在内存中
var htmlWebpackPlugin=require('html-webpack-plugin')  //是一个配置对象，需要new才行

//当以命令行形式运行webpack或wabpack-dev-server的时候，工具会发现，我们并没有提供，要打包的文件的入口和出口文件，此时，他会检查根目录中配置文件，并读取这个文件,就拿到了导出这个配置对象。然后根据对像，进行打包构键

module.exports={
    entry:path.join(__dirname,'./src/main.js'),  //这是入口
    output:{//指出输出选项
      path:path.join(__dirname,'./dist'),   //输出路径
      filename:'bundle.js'  //指定输出文件名称
    },
  plugins:[//wabpack插件配置节点
      new htmlWebpackPlugin({
        template:path.join(__dirname,'./src/index.html'), //指定模板文件路径
        filename:'index.html'  //设置生成的页面的名称
      })     //new 传值
  ],
  module:{  //配置第三方规则
      rules:[
        {test:/\.css$/,use:['style-loader','css-loader']},  //处理cssloader npm i style-loader css-loader -D
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //处理less文件npm i less-loader less -D
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//处理sass文件 npm i sass-loader node-sass -D
        {test:/.(jpg|png|gif|bmp|jpeg)/,use:['url-loader?limit=7367&name=[hash:8]-[name].[ext]']}, //npm i url-loader file-loader -D  limit 大于等于limit值不会转为base64，小于会被转为(ac311d0f74c8782e5a25e1940dc7681d.png
        {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}, //配置字体
        {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//这是babel来转换高级es6语法
      ]

  }
}

主要是最后一句我把整个配置文件发出来，方便

3运行程序

1.还需要在package.json中设置下运行指令：

{
  "name": "webpack-fuxi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap": "^4.4.1",
    "css-loader": "^3.4.2",
    "fibers": "^4.0.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^1.9.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "node-sass": "^4.13.1",
    "popper.js": "^1.16.0",
    "sass": "^1.3.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "dependencies": {
    "bootstrap": "^3.4.1"
  }
}

这里主要是scripts里面那段脚本代码：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src"
  },

以后运行打包程序webpack只需要输入指令 ：npm run dev

注意：前提是安装了WEBPACK-SERVER 安装命令CNPM I WEBPACK-DEV-SERVER -D 再次安装 CNPM I WEBPACK@3 -D 一定要注意安装版本是3，4.0有坑没研究过再次安装CNPM I HTML-WEBPACK-PLUGIN -S这个主要是自动生成一个被引用打包好的BUNDLE.JS文件的HTML文件在内存中

` 写配置文件就是上面的config，上面已经给，不再累述