如何新建webpack, babel, es6, eslint

1. 安装webpack

npm install -D webpack

2. 安装最新babel

npm install -D babel-loader @babel/core @babel/preset-env

3. 安装airbnb eslint

可能会多安装一些无用的，比如react eslint，但这是固定依赖，所以就先安装着，
毕竟只是开发依赖

npm install -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint eslint

4. 设置eslint配置

执行命令,交互式创建eslint配置

eslint --init

修改配置

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "airbnb",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
};

（可选）让class支持箭头函数

cnpm install --save-dev @babel/plugin-proposal-class-properties

在webpack.config.js中添加配置

      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties'],
          },
        },
      },

5. 设置webpack配置

新建文件webpack.config.js

const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: './src/index',

  output: {
    filename: 'index.bundle.js',
    path: path.resolve(__dirname, 'example/dist'),
  },

  module: {
    rules: [ // 此处是为babel添加的配置
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
}

6.作用解释

1. webpack只是使js文件增强了：支持require,支持babel,支持es6,支持import
2. babel只是webpack的一个小插件
3. eslint只是格式化代码，使代码更美观。

7.生命周期

1. 执行命令webpack -w
2. webpack调用node进行各种打包，编译，创建，删除文件待操作
3. webpack把各个js文件打包成一个js
4. html引用打包后的js文件

8.启动项目

时时打包编译项目，生成index.bundle.js

webpack -w 

热更新网页

live-server . --port=9000 --watch=. 

9.样式问题

因为css-loader是用js将css插入到head style标签中,所以是异步的，导致样式会有闪烁一下。
所以将style导出成文件就没这问题了。

cnpm install extract-text-webpack-plugin@next

const ExtractTextPlugin = require('extract-text-webpack-plugin')

      {
        test: /\.css$/,
        exclude: ['node_modules'],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
      
  plugins: [
    new ExtractTextPlugin('styles.css'),
  ],