vue項目安裝webpack4.x和babel7.x（接上一篇webpack）

安裝webpack4.x

　　上一篇已經安裝完了webpack4.x。http://www.javashuo.com/article/p-youagczj-dy.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