webpack 单入口项目基础配置教程(四)

这次我们来处理一下 解析 ES6 和 react 的需求

首先要安装三个插件

yarn add babel-core babel-loader babel-preset-stage-1 babel-preset-env --dev

• babel-core 这个插件是 babel 编译器的核心, 包含了 Node API 和 require 钩子
  
• babel-loader 是具体的编译插件
  
• babel-preset-env 是一个集成各种编译插件的新插件, 以前我们有 babel-preset-es2015、babel-preset-es2016 等等乱七八糟的编译插件, 现在一个 babel-preset-env就搞定了 (但是不包括 polyfill 和 react)

装好以后我们去修改下 webpack.config.js 文件

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /(node_modules)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['env', 'stage-1', 'react']
+                    }
+                }
+            }
+        ]
+    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'MY-WEBPACK',
            template: './src/index.html'
        })
    ]
};

这里要详细解释超出我能力范围了 只要大概了解一下就行

• module -> rules 这个数组里可以配置多个对象, 每个对象都是针对某种类型的文件应用一个 loader
  
• 这次我们在 rules 里只配置了一个对象
  
• test 属性使用正则指定了我们针对所有的 js 文件进行处理
  
• exclude 属性说明了 node_modules 下的 js 文件不做处理
  
• use -> loader 指定了 babel-loader 这个 loader 来处理 js 文件
  
• use -> options 设置了这个 loader 运用一个什么样的方式来进行处理 js 文件
  

那么 解析 ES6 的需求这里实际上已经基本完成了

我们继续处理下 react 语法 (jsx)

yarn add babel-preset-react --dev

看这个名字也知道是用来处理 react

然后我们再修改下 webpack.config.js

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
+                        presets: ['env', 'es2015', 'react']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'MY-WEBPACK',
            template: './src/index.html'
        })
    ]
};

接着在我们的项目里安装下 react 来验证

yarn add react react-dom

这次安装没加 --dev 这里提一下

加 --dev 是你开发时候依赖的东西

不加 --dev 是你发布之后还依赖的东西

这种区别会在 package.json 里表现出来 (dependencies 和 devDependencies)

修改 webpack.config.js 文件

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

module.exports = {
+    entry: './src/app.jsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        rules: [
            {
+                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'es2015', 'react']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'MY-WEBPACK',
            template: './src/index.html'
        })
    ]
};

我们修改了入口文件的后缀名和 module -> rules -> test 里的文件后缀名

修改 ./src/app.js 的内容 并把文件名改为 ./src/app.jsx

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    
Hello, world!
,
    document.getElementById('app')
);

接着可以运行打包指令了

node_modules/.bin/webpack

然后用浏览器打开 ./dist/index.html 看看结果, 你应该可以看到一行 "Hello, world!"

另外你有兴趣的话可以去 ./dist/app.js 看看, jsx 语法也被翻译为相应的 ES2015 语法了(反正我懒得看)


下一次我们处理下 css/sass 的解析