配置文件方式，module：{loaders：【{}】}

5+版本写法

高版本webpack写法

高版本webpack写法

高版本webpack写法

webpack4 module 和babel的安装方法都有不同

1,https://www.babeljs.cn/setup#installation

npm install --save-dev babel-loader @babel/core

module: {  rules: [    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }  ] }

npm install @babel/preset-env --save-dev

.babellrc 

{  "presets": ["@babel/preset-env"] }

重要的是看官网 cnpm和npm不要混用

如果混用出现错误 把node-modules文件夹删掉

重新 npm install

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader',
              // 排除
              exclude: /node_modules/,
              query: {
                  presets: ["@babel/preset-env"]
              }
          }
      ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            // html 标题
            title: 'this is a.html',
            // 使用模板
            template: 'index.html',
            // script标签插入位置
            inject: 'body'
        }),
    ],
};

安装babel：

npm install --save-dev babel-loader @babel/core 
npm install @babel/preset-env --save-dev

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
          {
              test: /\.js$/,
              loader: 'babel-loader'
          }
      ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            // html 标题
            title: 'this is a.html',
            // 使用模板
            template: 'index.html',
            // script标签插入位置
            inject: 'body'
        }),
    ],
};

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  // 引入babel
  "babel": {
    "presets": ["@babel/preset-env"]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.dev.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}

babel官网：

https://babeljs.io/setup#installation

babel中文网：

https://www.babeljs.cn/

原文;

module: {loaders: [{test: /\.js$/,loader: 'babel'}]},

应该：

module: {rules : [{test: /\.js$/,loader: 'babel'}]},

原因：

webpack v2 之后都用rules 了

https://segmentfault.com/q/1010000013456976

exclude，include 排除，指定babel打包的范围

使用loaders转化es6

babel

指定js编译版本

.babelrc   {'presets':['lastest']} 

新版本已经不支持loaders了

babel-loader@7版本

npm install --save-dev babel-loader@7

module:{
    rules:[
        {
            test:'/\.js$/,
            use:{
                loader:'babel-loader',
                options:{
                    "presets":['latest']
                }
            }
        }
    ]
}

使用预处理js的loader：babel（将es6等转换为浏览器可以直接处理的JS）

第一步要安装 命令行输入npm i --save-dev babel-loader babel-core

第二步配置babel使其可以转化指定版本的js，如es2015，使用presers进行配置  指定完之后需安装 npm i --save-dev babel-preset-latest

第三步 使用loader并进行相关配置

除了直接在loader使用的时候配置babel，也可以在package.json中进行babel的配置如下：

loader其他参数讲解：exclude（设置不需要处理的文件的目录）、include（需要使用该loader去处理的文件目录，只打包该目录下的文件）、loaders(loaders是数组类型的一连串loader，不再是单个字符串类型的单个loader)

package.json中定义“babel”:{

preset:}

npm i --save-dev babel-loader babel-core

npm i --save-dev babel-preset-latest

配置文件中属性modules:{

                        loaders:[

                        test:/\.js$/,

                        loader:'babel',

                        query:{

                            presets['latest']}

]

}

最后的 babel 配置

module.loaders 下的参数：test、exclude、include、loader、loaders(loaders是数组类型的一连串loader，不再是单个字符串类型的单个loader)

目前官方webpack4相关的属性修改蛮多的好像。。。

exclude: './node_modules/'

该目录下的 js 文件不用再去用 babel 打包，因为都打包过了 ... 但是由于代码目前没有引用 node_modules（require 引用） 所以打包速度改变不大... （后续对 npm 包引用的增多，效果增大）

指定打包的范围

include: './src/'

只打包 src 目录下的文件，速度加快很多

将 babel 的 presets 从 package.json 配置中移到 webpack 对应 loader 下的 query 设置

存在问题 代码很少但打包很久。。。。

问题出在打包 babel-loader 上，babel-loader 非常耗时的语法转换

此时的配置文件

老师的babel-core@6.18.0 和 babel-loader@6.2.7 版本号

webpack 使用 babel 之前 npm 安装 babel， babel 的使用

• npm install --save-dev babel-loader babel-core

• webpack 配置 babel-loader

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

• webpack 配置 evn presets（这点不是很懂），指定 presets ，告诉 babel-loader 怎么处理 js；还可以通过根目录下创建 .babelrc 配置文件，设置 { "presets": ["env"] }，官方；还可以在 package.json 文件中添加 "babel": { "presets": ["latest"] } ;

module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader",
      query: {
          'presets': ['latest']
      }
    }
  ]
}

• 安装 evn presets 插件：npm install --save-dev babel-preset-latest （官网没有 lastest 版本，而是 推荐使用 npm install babel-preset-env --save-dev，babel-preset-env replaces es2015, es2016, es2017 and latest）https://babeljs.io/docs/plugins/

http://babeljs.io/docs/setup/#installation

安装babel插件的命令是npm install --save-dev babel-loader babel-core