vue项目安装webpack4.x和babel7.x（接上一篇webpack）

安装webpack4.x

　　上一篇已经安装完了webpack4.x。https://www.cnblogs.com/webgis-ling/p/11445811.html

安装babel7.x

　　babel6以及以下版本安装方式和babel7的安装有很多不同点。

　　在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的ES6语法，或者ES7语法在 webpack 是处理不了的，需要通过第三方的loader 来帮助webpack 处理这些高级的语法，当第三方loader 把高级语法转为低级语法之后，会把结果交给webpack 打包到 bundle.js中。通过 Babel 可以将高级语法转化为 低级语法。

　　在vue项目指定目录安装相应的包：

　　1. 第一套包：cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D

　　2.第二套包：cnpm i @babel/preset-env @babel/plugin-proposal-class-properties @babel/runtime -D

　　我的package.json文件：

{
  "name": "webpack-study",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "babel-loader": "^8.0.6",
    "bootstrap": "^4.3.1",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.4.1",
    "popper.js": "^1.14.7",
    "style-loader": "^1.0.0",
    "url-loader": "^2.1.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8080 --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

在webpack配置文件钟配置babel的rules

　　打开webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个匹配规则：

　　 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},

　　我的webpack.config.js配置文件：

const path = require('path')

//导入在内存中生成 html页面的插件
//只要是插件，就一定要放到 plugins 节点中去
//这个插件的两个作用：
// 1.自动在内存中根据指定页面生成一个内存的页面
// 2.自动把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require("html-webpack-plugin")

//这个配置文件，其实就是一个JS文件，通过 Node中的模块操作，向外暴露了一个配置对象
module.exports = {
    entry: path.join(__dirname, './src/main.js'),//入口，表示webpack打包哪个文件
    output: {//输出相关文件的配置
        path: path.join(__dirname, './dist'), //指定打包好的文件，输出到哪个目录中去
        filename: 'bundle.js'//这是指定输出文件的名称
    },
    plugins: [//配置插件的节点
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'),//指定模板页面，将来会根据指定的模板页面路径去生成内存中的页面
            filename: 'index.html'//指定生成页面的名称
        })
    ],
    module: {//这个节点用于配置所有第三方模块加载器
        rules: [//所有第三方模块的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//配置处理 .css 文件的第三方loader 规则

            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1734051&name=[hash:8]-[name].[ext]' }, //处理图片路径的 loader 
            // limit 是给定的值，是图片的大小，单位是byte，如果我们引用的图片大于或等于给定给定的limit值，则不会转化为base64格式的字符串，如果图片小于给定的limit值，则图片就会被转化为base64格式的字符串

            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },//处理字体文件的 loader
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}, //配置 Babel 来转换高级的ES语法
        ]
    }
}

 

　　注意：在配置 babel 的 loader 规则的时候，必须把 node_modules 目录通过 exclude 选项排除掉，原因：如果不排除 node_models，则 babel 会把 node_modules 中所有的第三方 JS 文件全都打包编译，否则，会非常消耗 CPU，同时打包速度非常慢，就算最终 Babel 把所有 node_modules 中的js转换完毕，但是项目依然无法正常运行！

添加babel的配置文件 .babel

　　在项目的根目录中新建一个叫做 .babelrc 的Babel配置文件，这个配置文件属于json 文件，严格按照json文件格式写.

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

　　最后npm run dev