从零搭建react 脚手架

前言

目前前端最主流，应用最广的webpack总结下

目前常用的构建工具

1. facebook官方的create-react-app（官方推荐）
   create-react-app

但是现在大部分公司都需要自己能搞定脚手架，所以大家还是能自己搭建为好

（二）webpack基本概念

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

---

• entry
  webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
  配置参数

---

• output
  output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
  配置参数

---

• loader
  webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

  配置中 loader 有两个目标：
  test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  use 属性，表示进行转换时，应该使用哪个 loader。

  配置参数

---

• plugins
  插件目的在于解决 loader 无法实现的其他事。比如 压缩js（uglifyjs-webpack-plugin），压缩css（optimize-css-assets-webpack-plugin），将js中的css分离独立出来（extract-text-webpack-plugin）等

配置参数

（三）搭建webpack基础环境

• 初始化项目目录

$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y // -y的意思是默认安装

新建四个文件，分别是webpack.base.js（基础环境），webpack.dev.js（开发环境），webpack.prod.js（生产环境），.gitignore（git忽略文件）

这时候我们的文件目录为

---

• 配置webpack基本环境设置
  注意：-S是安装在生产环境，-D安装在开发环境。

 // 模块管理和打包工具
$ npm install webpack@3 -D
// 监听代码自动刷新（注意@3版本对应webpack@4）
$ npm install webpack-dev-server@2 -D 
// 安装merge
$ npm i webpack-merge -D
// 安装html处理
$ npm i html-webpack-plugin -D
// 清除插件
$ npm i clean-webpack-plugin -D
// copy 插件
$ npm i copy-webpack-plugin -D
// 安装dev open-browser
$ npm i open-browser-webpack-plugin -D
// 安装 lodash 
$ npm install  lodash -S

新建public和src文件夹，项目目录为下图

配置webpack.base.js

/**
 * @component webpack.base.js
 * @description 基础环境
 * @time 2018/3/8
 * @author **
 */
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除dist
const CopyWebpackPlugin = require('copy-webpack-plugin'); // copy

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    entry: {
        app: './src/index.js',
        vendor: [
            'lodash'
        ]
    },
    resolve: {
        extensions: [' ', '.js', '.json', '.jsx', '.css', '.less','.json'],
        modules: [resolve( "src"), "node_modules"], //绝对路径;
    },
    module: {
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new CopyWebpackPlugin([{
            from: "./public",
            to: "",
            force: true
        }]),
        new HtmlWebpackPlugin({
            filename: 'index.html',//输出的html路径
            template: './public/index.html', //html模板路径
            chunks: ['app', 'vendor', 'manifest'],
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoc