使用webpack搭建es6环境 --20180902

关于 es6 环境的搭建

date： 2018年08月29日09:18:12. author: 付腾飞

我的系统是 Mac 下面的一些操作，如果在win下 需要自己自行做对应的操作，我在命令行里面的文件夹或者文件操作，你可以使用鼠标来完成，或者在win下的git-bash下和我一样敲命令。

前提

• 要安装nodejs
  Mac或者win系统去官网找安装包，安装即可，Linux的安装方法以后补充
• 安装 nre

  npm i -g nre  # 用来切换  npm 仓库地址
  nre ls
  nre use
  nre help
  
  nre use taobao  # 切换 npm  仓库为 淘宝
  npm i -g yarn   # yarn 作用和 npm 仓库差不多， 个人觉得 yarn 安装东西比 npm 略微快

  初始化一个文件夹

mkdir demodir
cd demodir
npm init  # 一步一步一步的的来
npm init -y   # 一步到位  该命令执行完毕会在根目录生成一个 package.json 文件

安装 webpack webpack-cli

安装 webpack webpack-cli

npm i  webpack webpack-cli --save-dev  
# or
yarn add webpack webpack-cli -D  # -D 和 npm的 --save-dev 依然表示这些知识

# 在demodir下新建 src 文件，然后在该文件夹下新建 index.js 该文件将是整个项目的入口
midir src
touch index.js
# or
echo 'alert(100)' >> index.js

新建webpack 配置文件 webpack-dev-config.js

内容如下

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',    # entry 为webpack 入口
  output: {                   # output 为出口
    path: __dirname,          # __dirname 为 nodejs 变量，指当前 webpack-dev-config.js 所在目录
    filename: './dist/bundle.js'    # 在filename 里面可以同时包含相对路径加文件名，也可只写文件名
  }
}

修改 package.json 文件的 scripts 键值

{
  "name": "demodir",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack --config ./webpack.dev.config.js --mode development"
  },
  "devDependencies": {
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
  }
}

上面的 –mode development 必须指定 为开发模式 也可以切换为 production 模式

然后 测试一下

npm run dev  # 应该会在当前项目根目下生成 dist 文件夹， 里面有一个 bundle.js

安装 webpack-dev-server 和 html-webpack-plugin

yarn add webpack-dev-server html-webpack-plugin -D

# or
npm i webpack-dev-server html-webpack-plugin --save-dedv

修改 webpack-dev-config.js

在上一步基础上面新增 plugins 和 devServer 两项配置
在项目根目录 新建 index.html 这个页面将会在下一次 运行 npm run dev 时丠自动打开

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: './dist/bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',   // 项目模板
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, './dist'),  // 根目录
    open: true,  // 自动打开浏览器
    port: 9000
  }
}

修改 package.json 里面的 dev 字段的 webpack 为 webpack-dev-server

{
  "name": "mode-design",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  }
}

配置 webpack 的 es6语法转换

在项目根目录里面新建 .babelrc 文件

安装 babel 相关的包

慕课网里面双城老师使用的包是 babel-core babel-loader babel-polyfill babel-preset-es2105 babel-preset-latest
命令是 ：

npm i babel-core babel-loader babel-polyfill babel-preset-es2105 babel-preset-latest --save-dev

然后在 .babelrc 里面增加如下内容

{
  "presets": ["es2015", "latest"],
  "plugins": []
}

然而以上操作会让下面的验证操作部分在终端报错， 原因是 babel 旧版本的问题
ref： https://github.com/babel/babel/issues/6186

正确的姿势是：

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

.babelrc 里面的内容为：

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

再次修改webpack.dev.config.js

新增 module 字段， 对 js 结尾文件使用 babel 转换

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: './dist/bundle.js'
  },
  module: {
    rules: [{
      test: /\.js?$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader'
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, './dist'),  // 根目录
    open: true,  // 自动打开浏览器
    port: 9000
  }
}

测试

修改src/index.js 为

class Person {
  constructor (name) {
    this.name = name
  }

  getName () {
    return this.name
  }
}

let p  = new Person('Husky')
alert(p.getName())

在项目根目录运行 npm run dev 将会自动打开一个页面，并且弹出 Husky , 而且终端没有报错。