Webpack

问题 每次创建新的页面时，如果都要去更改webpack的入口 配置文件，那样太不爽了，我们改造我们的代码来动态获取入口文件。 改造 1、安装glob $ npm install glob -D 2、动态获取目录中的文件 const glob = require('glob'); /* * 1. 我们以文件夹里是否有html文件为准，来判断是否需要生成多页面 * 2. 我们的多页应用目录最多支持三级 */ const pages = glob.sync('./src/pages/**?/**/index.html').map(item => { /* * …

安装依赖 $ npm install chalk inquirer fs-extra -D chalk，终端美化； inquirer，命令行交互工具； fs-extra，fs模块的增加版； 创建页面的脚本 newPage.js const path = require('path'); const chalk = require('chalk'); const inquirer = require('inquirer'); const fs = require('fs-extra'); // 获取传递的参数 const …

添加 React $ npm install react react-com home/index.js import React from 'react'; import ReactDOM from 'react-dom'; function App() { return <h1>About page - Rendered by React</h1>; } ReactDOM.render(<App />, document.getElementById('root')); about/index.js …

准备工作 1、创建项目 $ mkdir multi-pages & cd multi-pages $ npm init -y 2、项目结构 src/ pages/ home/ index.js about/ index.js webpack.config.js home/index.js export default function index() { return 'Home Page'; } document.getElementById('root').innerHTML = index(); about/index.js export …

统计shell脚本执行时间 #!/bin/bash #记录开始时间 start_time=$(date +%s) #安装及构建 npm install npm run build #记录结束时间 end_time=$(date +%s) #计算执行时间 cost_time=$[ $end_time-$start_time ] #输出执行时间 echo $cost_time echo "cost time is $(($cost_time/60))min $(($cost_time%60))s" 分析webpack编译时间 1、安 …