Webpack 本身只能处理原生的 JavaScript模块,但是loader转换器可以将各种类型的资源转换成JavaScript模块。这样,任何资源都可以成为 Webpack 可以处理的模块。
Webpack将所有静态资源都认为是模块,比如JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等等,从而可以对其进行统一管理。为此Webpack引入了加载器的概念,除了纯JavaScript之外,每一种资源都可以通过对应的加载器处理成模块。和大多数包管理器不一样的是,Webpack的加载器之间可以进行串联,一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css,然后再通过css-loader加载成css模块,最后由style-loader加载器对其做最后的处理,从而运行时可以通过style标签将其应用到最终的浏览器环境。 上一章我们已经成功的在控制台输出了hello world!接下来我们进一步的去完善,加入react。安装react
npm install react --save
npm install react-dom --save
安装完成之后,打开entry.js,我们在这里加入react代码,如下图
import React from 'react';import { render } from 'react-dom';render(hello world, document.getElementById('app'));
加入后会发现这里会报错!因为在webpack看来一切都是模块,只有通过合适的loaders,它们才可以被当做模块被处理。
安装合适的loaders
npm install babel-loader --save-dev
npm install babel-core --save-dev
//安装加载器 babel-loader 和 Babel 的 API 代码 babel-corenpm install babel-preset-es2015 --save-dev
//ES2015转码规则npm install babel-preset-react --save-dev
//react转码规则npm install babel-preset-stage-0 --save-dev
//ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个,这里我装的是stage-0npm install babel-preset-stage-1 --save-dev
npm install babel-preset-stage-2 --save-dev
npm install babel-preset-stage-3 --save-dev
也可以一起安装npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
写入配置
const path = require('path');module.exports = { entry: "./src/entry.js", output: { path: '/dist/', filename: "bundle.js", publicPath: '/dist/' }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', include: [ path.resolve(__dirname, "src") ], options: { presets: ["es2015", "react","stage-0"] }, }, ], }}
运行npm run dev
打开页面就可以看到hello world了!
{ "presets": ["es2015", "react","stage-0"]}