网站开发太简单了框架/阿里妈妈推广网站
前言
事例一：我们在使用react的时候，会用create-react-app命令下载一个react的模板，然后开始在里面实现各种功能。
事例二：前几个月的时候，我偶然发现飞冰官网，浏览后觉得不错，并在其上面下载了几个模板。
那我们可能好奇两件事情： - 这个模板是如何从一个空目录下搭建起来的呢 - 这个模板搭建起来之后，是如何定义命令行下载的呢
本文将按照我自己的一个想法、以react模板样式为基准，就这两个话题展开叙述。
一、开始搭建
1.1 目录
├─ build // webpack配置目录
│ ├─ webpack.base.js // webpack共有配置
│ ├─ webpack.dev.js // webpack开发环境配置
│ └─ webpack.prod.js // webpack生产环境配置
├─ public // 模板存放目录
│ ├─ favicon.ico // 网站图标
│ └─ index.html // 模板html文件
├─ src // 项目
│ ├─ common // 共有方法
│ ├─ compoents // 自封装组件
│ ├─ layouts // 布局组件
│ ├─ pages // 页面
│ ├─ index.js // 项目入口
│ ├─ App.css // css样式
│ ├─ logo.svg // 项目入口
│ └─ App.jsx
├─ .babelrc // babel配置文件
├─ .browerslistrc // 配置浏览器的兼容性范围
├─ .gitignore // 忽略上传文件
├─ package.json
├─ README.md // 工程搭建文档说明1.2 初始化
首先，我们要创建一个空目录，然后初始化项目 npm init -y 执行完命令，我们会在目录中看见一个package.json文件。
1.3 配置package.json
我们知道，无论是项目的启动还是打包，它的命令是从package.json文件中自己定义的。在创建的模板中，有start命令-启动react，有build-将react项目打包，目前我们只配置这两个命令。
找到pakage.json文件中的scripts，像这样配置
"scripts": {"start": "webpack-dev-server --env.development --config ./build/webpack.base.js", // 开发环境启动服务,"dev":"webpack --env.development --config ./build/webpack.base.js", // 开发环境打包代码"build": "webpack --env.production --config ./build/webpack.base.js", // 生产环境打包代码"build:server": "webpack-dev-server --env.production --config ./build/webpack.base.js" // 生产环境启动服务},这样，我们完成了基础的配置，但是，我们会思考：不同的平台（Mac和Windows）是不是会出现设置环境变量不一样的问题？基于这个问题，我们找到了cross-env插件，那我们应该如何将上面配置好的scripts改进呢？
"scripts": {"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.base.js","dev":"cross-env NODE_ENV=development webpack --config ./build/webpack.base.js","build": "cross-env NODE_ENV=production webpack --config ./build/webpack.base.js","build:server": "cross-env NODE_ENV=production webpack-dev-server --config ./build/webpack.base.js"},配置好以后，下一步，我们就开始配置webpack
1.4 配置webpack
1.4.1 webpack.base.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const dev = require('./webpack.dev');
const prod = require('./webpack.prod');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');const isDev = process.env.NODE_ENV === 'development';const base = {entry: path.resolve(__dirname, '../src/index.js'), // 入口module: { rules: [{ // 对.js、.jsx的处理test: /.(js|jsx)$/,exclude: /node_modules/,use: 'babel-loader'}, { // 对.css的处理test: /.css$/,use: [!isDev && MiniCssExtractPlugin.loader, // 生产环境下样式抽离isDev && 'style-loader',{loader: 'css-loader',options: {importLoaders: 1 // 引入的文件调用后面的loader处理}},{ // 智能添加样式前缀loader: "postcss-loader",options:{plugins:[require('autoprefixer')]}},].filter(Boolean)}, {test: /.scss$/, // css预处理器scss的处理use: [!isDev && MiniCssExtractPlugin.loader, // 生产环境下抽离样式isDev && 'style-loader',"css-loader","sass-loader"].filter(Boolean)}, {test: /.less$/, // css预处理器less的处理use: "less-loader",}, {test: /.stylus$/, // css预处理器stylus的处理 use: "stylus-loader",}, {test: /.(jpe?g|png|svg|gif)$/, // 对图片的处理loader: "file-loader",options: {name: "image/[contentHash].[ext]"},}, {test: /.(woff|ttf|eot|otf|ico)$/, // 对字体图标的处理loader: "file-loader",options: {name: "image/[name].[ext]"},}]},output: { // 出口filename: 'scripts/[name].bundle.js',path: path.resolve(__dirname, '../dist')},resolve: { // 引入js、jsx文件时，无需添加后缀extensions: ['.js', '.jsx'],},plugins: [!isDev && new MiniCssExtractPlugin({ // css样式抽离filename: 'css/[name].[contentHash].[ext]'}),new HtmlWebpackPlugin({ // 配置入口htmlfilename: 'index.html',template: path.resolve(__dirname, '../public/index.html'),hash: true,inject: true,favicon: path.resolve(__dirname, '../public/favicon.ico'), minify: !isDev && {removeAttributeQuotes: true, // 去掉属性双引号collapseWhitespace: true, // 将html文件折叠成一行}}),new webpack.HotModuleReplacementPlugin(),].filter(Boolean),devServer: { // 配置服务hot:true, // 热更新port: 3000, // 端口号compress: true, // 提升页面返回速度open: true, // 启动服务后自动启动浏览器contentBase: path.resolve(__dirname, '../dist'), // webpack启动服务会在dist目录下}
}module.exports = () => { // 根据环境合并webpackif (isDev) {return merge(base, dev);} else {return merge(base, prod);}
}1.4.2 webpack.dev.js
module.exports = {mode: 'development',
}1.4.3 webpack.prod.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = {mode: 'production',plugins: [new CleanWebpackPlugin(), // 打包前清空dist目录new UglifyJsPlugin({ // 打包后自动去除debugger、console等 uglifyOptions: {compress: {drop_debugger: true, drop_console: true,pure_funcs: ['console.log', 'debugger']}},parallel: true}),],
}1.5 查看效果
现在，我们已经实现了一个属于自己的模板，但是我们发现打包的速度可能会有一些慢。那究竟如何让自己的代码打包更快呢？
我们可以优化我们的webpack配置~
关于webpack的配置优化，后续,会单独写一个文章~
二、自定义命令下载自己的模板
我们都用过vue-cli、create-react-app等命令下载一个初始的vue、react模板，这里我要写一个属于自己的cli下载属于自己的模板（手动狗头）~
我的cli在npm上的名字叫react-demo-cli,下载模板的命令是create-react-cli download
所以，在使用的时候，先输入命令 npm install react-demo-cli -g 然后 create-react-cli download 就可以啦~
效果是这样婶滴
最后
这一篇文章的核心简单来说有两条 - 配置webpack - 搭建一个自己的cli 只要这两件事情搞定了，问题就不难了
这里，主要说了从零搭建自己的react框架的思路、方法，效果和create-react-app等比起来，还是差很多。所以，我会不断优化自己和自己的代码~
还有: - 对于cli，只有使用方法，后续会有专门的文章讲解如何搭建一个自己的cli。这里还要感谢圈圈的圈的cli代码讲解~ - 对于webpack，我使用了webpack-dev-server来启动服务，这样启动的服务在控制台打印了很多东西，所以后续会改为自己编写脚本的方式~
下面，是cli和react-template的github地址
- react-template
- react-demo-cli
上面的文章如有不对之处，还请大家指点出来~我们共同进步~
最后，分享一下我的公众号「web前端日记」的二维码，欢迎前来大家关注~
