1. 初体验

很乱，数不清的配置

2. 安装

1. 创建目录

mkdir webpack-demo
cd webpack-demo
npm init  //创建一个package.json

2. copy Github上webpack官网的文档

//这是webpack3，安装需要加@3
npm i webpack@3

//配置
touch webpack.config.js
vi  webpack.config.js
//在里面写以下内容
/*
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};*/

//创建文件
touch src/index.js

//运行webpack
npx webpack  //这时会多出dist目录，里面有bundle.js文件

3. 使用

1. 在index.js里写

console.log(1)

//再运行webpack:
npx webpack

//再看bundle.js，这时会多出来一行console.log(1) 

2. 安装babel-loader自动转换es6，我用的是 7.x branch for docs with Babel v6

//安装v6，命令行
npm install babel-loader babel-core babel-preset-env webpack

//将这个复制到webpack的配置文件webpack.config.js里，加在output的下面
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

//加在output的下面，复制完后成这样
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}
};

运行npx webpack
若出现can't find '...'或can't resolve '...'的报错，则安装省略号里的东西npm i '省略号'
注意：若是Couldn't find preset "env"，不要安装env，而是npm i babel-preset-env

3. 使用babel

//当你在写index.js里写
let a=1
//它就会帮你自动转换成es5了

3. 总结

太乱了太多配置了，希望parcel赶快升级替换掉webpack