## webpack (运行在 node 环境)
* 浏览器 只认识 img css js html html5 css3
grunt 早 没人用了
gulp 很少一部分人用
webpack 1 2, 3, 4, 5: 大部分
1.
jsx async @ => 转化 ecma5
less sass => 转成 css
2. 压缩
3. img < 5K => 自动转成 Base64
* 配置文件 webpack.config.js
* 入口 出口 loader 插件 模式
* 入口: 整个项目入口
* 出口: webpck 打包后的文件放在哪
* loader: 把文件解析成浏览器可读的格式
babel-loader: jsx e6 e7 -> e5
leass-loader: less -> css
* webpack webpack-cli 这2必须都装
解析index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<div>小花</div>,
document.getElementById('root')
)
在 webpack.config.js
const webpack = require('webpack')
const path = require('path')
module.exports = {
// 入口
entry: {
index: './index.js',
},
// 出口
output: {
// 打包后的文件名
filename: 'xsa.js',
// 打包后的目录
path: path.join(__dirname, './dist'),
},
module: {
rules: [
{
// test 属性 识别出哪些文件会被转换
test: /\.jsx?$/,
// node_modules 里文件不转换
exclude: /node_modules/,
// 定义出在进行转换时 应该使用哪个 loader
use: {
loader: 'babel-loader'
}
},
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
// beautify
// true: 美化代码输出
// false: 压缩代码 会删除部分注释
beautify: false,
// comments
// true: 保留所有注释
// false: 删除所有注释
comments: false
})
]
}
执行webpack 产生一个dist文件夹
在html里引用就行