• 搭建react的架手架


    1、回顾

    cnpm i @vue/cli -g ----- 4的脚手架 ------ webpack 4

    cnpm i @vue/cli@3 -g ----- 3的脚手架 ------ webpack 4

    vue create myapp

    cnpm i vue-cli -g ----- 2的脚手架 ------ webapck 3

    vue init webpack myapp

    • cnpm i @vue/cli-init -g ------ 3、4 兼容 2的写法

    vue init webpack myapp

    17年使用vue-cli 2的脚手架,用的是webpack3,命令为vue init webpack myapp

    18年使用@vue/cli 3的脚手架,用的是webpack4,命令为vue create myapp

    新的脚手架兼容旧的版本创建项目,使用模块 @vue/cli-init

    2 和 3 的区别可以说是 webpack 3和 webpack4的区别

    webpack4 免配但可配,webpack3 必配

    vue的脚手架 基于 webpack4 免配的

    react的脚手架 基于 webpack4 配置的

    2、webpack的配置 --- webpack 3

    基于node,模块化、组件化开发的利器,配置名称为 webpack.config.js

    webpack起初是facebook专门为react而量身打造的,后开源,其他语言也在用

    2.1 创建文件 webpack.config.js

    module.exports = {
    }
    

    2.2 创建入口文件 src/main.js

    console.log('hello webpack')
    

    2.3 配置文件配置入口

    module.exports = {
      // entry: './src/main.js' // string类型写法
      entry: { // object 类型写法 ---- 推荐写法
        app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
      }
    }
    

    2.4 配置文件配置输出

    module.exports = {
      // entry: './src/main.js' // string类型写法
      entry: { // object 类型写法 ---- 推荐写法
        app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
      },
      // +++++++++++++++++++++++++++++++++++++++++++
      output: { // 输出配置 ----- dist/app.js
        path: __dirname + '/dist', // 项目打包在dist目录下
        filename: '[name].js' // [name] 表示变量,如果入口确定名字app,输出就是app.js
      }
    }
    

    2.5 安装依赖,测试此项配置

    cnpm i webpack@3 -g

    命令行输入 webpack 指令 即可打包, dist/app.js出现

    2.6 创建页面index.html,引入导出的js文件,查看效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      
    </body>
    <!-- ++++++++++++++++++++++++++ -->
    <script src="dist/app.js"></script>
    </html>
    

    2.7 配置自动导入js文件,类似vue

    • 删除 index.html 中导入js文件

    • 给webpack的配置添加 插件,使用插件导入js

    module.exports = {
      // entry: './src/main.js' // string类型写法
      entry: { // object 类型写法 ---- 推荐写法
        app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
      },
      output: { // 输出配置 ----- dist/app.js
        path: __dirname + '/dist', // 项目打包在dist目录下
        filename: '[name].js' // [name] 表示变量,如果入口确定名字app,输出就是app.js
      },
      // ++++++++++++++++++
      plugins: [ // 添加插件 ---- 数组
    
      ]
    }
    
    • cnpm i webpack@3 -D 基础模块 ---- 必须安装

    • cnpm i html-webpack-plugin -D

    const webpack = require('webpack'); // ++++++++++++++++
    const HtmlWebPackPlugin = require('html-webpack-plugin');// ++++++++++++++++
    module.exports = {
      // entry: './src/main.js' // string类型写法
      entry: { // object 类型写法 ---- 推荐写法
        app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
      },
      output: { // 输出配置 ----- dist/app.js
        path: __dirname + '/dist', // 项目打包在dist目录下
        filename: '[name].js' // [name] 表示变量,如果入口确定名字app,输出就是app.js
      },
      plugins: [ // 添加插件 ---- 数组
        // ++++++++++++++++++++++++++
        new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
          template: 'index.html' // 找的就是当前文件夹下的index.html文件
        })
      ]
    }
    

    重新执行webpack指令,发现dist文件夹下生成一个index.html文件,并且自动引入了生成的js文件

    2.8 打包项目前先压缩js文件 - 插件

    • 复制页面引入js前添加压缩js插件
    plugins: [ // 添加插件 ---- 数组
        // ++++++++++++++  无需安装额外模块,基于webpack的基础模块
        new webpack.optimize.UglifyJsPlugin(), // 压缩js文件
        new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
          template: 'index.html' // 找的就是当前文件夹下的index.html文件
        })
      ]
    

    控制台运行webpack,重新打包查看app.js已为压缩过的js文件

    3、js文件中引入css文件 ---- css文件作为模块使用

    3.1 创建src/main.css

    html {
      background-color: #f66;
    }
    

    3.2 src/main.js处引入css文件

    import './main.css'; // +++++++++++++++++++
    console.log('hello webpack')
    

    运行命令webpack,发现以下错误,需要安装合适解析器去解析css模块语法

    ERROR in ./src/main.css
    Module parse failed: Unexpected token (1:5)
    You may need an appropriate loader to handle this file type.
    

    3.3 配置webpack的解析器

    const webpack = require('webpack');
    const HtmlWebPackPlugin = require('html-webpack-plugin');
    module.exports = {
      // entry: './src/main.js' // string类型写法
      entry: { // object 类型写法 ---- 推荐写法
        app: './src/main.js' // 会将本项目打包成为一个js文件  app.js
      },
      output: { // 输出配置 ----- dist/app.js
        path: __dirname + '/dist', // 项目打包在dist目录下
        filename: '[name].js' // [name] 表示变量,如果入口确定名字app,输出就是app.js
      },
      plugins: [ // 添加插件 ---- 数组
        new webpack.optimize.UglifyJsPlugin(), // 压缩js文件
        new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
          template: 'index.html' // 找的就是当前文件夹下的index.html文件
        })
      ],
      // +++++++++++++++++++
      module: { // 各类解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
        rules: [ // 解析器规则
    
        ]
      }
    }
    

    3.4 安装css模块的解析器

    cnpm i style-loader css-loader@0 -D

    3.5 配置css的解析器

    module: { // 各类解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
        rules: [ // 解析器规则
          {
            test: /.css$/, // 处理的是以css为结尾的css模块
            loader: 'style-loader!css-loader' // 从右到左解析,将css文件由css-laoder转换成样式表,将样式表由style-loader添加到dist/index.html内,在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
          }
        ]
      }
    

    4、scss模块解析器配置

    cnpm i node-sass sass-loader@7 -D

    • 创建src/main.scss文件
    html {
      background: #00f;
    }
    
    • src/main.js引入scss文件
    import './main.scss';
    console.log('hello webpack')
    
    • 报错 同上

    • 添加scss配置信息

     module: { // 各类解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
        rules: [ // 解析器规则
          {
            test: /.css$/, // 处理的是以css为结尾的css模块
            loader: 'style-loader!css-loader' // 从右到左解析,将css文件由css-laoder转换成样式表,将样式表由style-loader添加到dist/index.html内,在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
          },
          // +++++++++++++++++++++
          {
            test: /.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
          }
        ]
      }
    

    运行webpack,浏览页面,发现为蓝色,表明scss配置成功

    5、less模块解析器配置

    cnpm i less less-loader -D

    • 创建src/main.less文件
    html {
      background: #0f0;
    }
    
    • src/main.js引入less文件
    import './main.less';
    console.log('hello webpack')
    
    • 报错 同上

    • 添加scss配置信息

     module: { // 各类解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
        rules: [ // 解析器规则
          {
            test: /.css$/, // 处理的是以css为结尾的css模块
            loader: 'style-loader!css-loader' // 从右到左解析,将css文件由css-laoder转换成样式表,将样式表由style-loader添加到dist/index.html内,在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
          },
          {
            test: /.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
          },
          // +++++++++++++++++++
          {
            test: /.less$/,
            loader: 'style-loader!css-loader!less-loader'
          }
        ]
      }
    

    运行webpack,浏览页面,发现为绿色,表明less配置成功

    6、stylus模块解析器配置

    cnpm i stylus stylus-loader -D

    • 创建src/main.stylus文件
    html{
      background: #000;
    }
    
    • src/main.js引入stylus文件
    import './main.stylus';
    console.log('hello webpack')
    
    • 报错 同上

    • 添加stylus配置信息

     module: { // 各类解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
        rules: [ // 解析器规则
          {
            test: /.css$/, // 处理的是以css为结尾的css模块
            loader: 'style-loader!css-loader' // 从右到左解析,将css文件由css-laoder转换成样式表,将样式表由style-loader添加到dist/index.html内,在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
          },
          {
            test: /.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
          },
          {
            test: /.less$/,
            loader: 'style-loader!css-loader!less-loader'
          },
          // +++++++++++++++++++
          {
            test: /.stylus$/,
            loader: 'style-loader!css-loader!stylus-loader'
          }
        ]
      }
    

    运行webpack,浏览页面,发现为黑色,表明stylus配置成功

    7、配置js的解析器

    其实最重要的就是解析js的高级语法,让他可以在浏览器中访问

    cnpm i babel-core@6 babel-loader@7 -D

    如果要使用js最新的语法,那么需要安装相应的模块并且配置

    env 包含了 es2015 以及 es7.....

    cnpm i babel-preset-es2015 babel-preset-env -D

    如果需要做react应用,还需安装模块

    cnpm i babel-preset-react -D

    根目录下创建 文件 .babelrc, 文件可以省,但是配置不能省,省是配置到了webpack的配置文件

    {
      "presets": ["es2015", "env", "react"]
    }
    

    添加js的解析器

    module: { // 各类解析器 css / scss/ less/ stylus / 背景图片 / 字体图标....
        rules: [ // 解析器规则
          {
            test: /.css$/, // 处理的是以css为结尾的css模块
            loader: 'style-loader!css-loader' // 从右到左解析,将css文件由css-laoder转换成样式表,将样式表由style-loader添加到dist/index.html内,在查看页面效果时才可见 --- 渲染到了页面中的head标签内部
          },
          {
            test: /.scss$/,
            loader: 'style-loader!css-loader!sass-loader'
          },
          {
            test: /.less$/,
            loader: 'style-loader!css-loader!less-loader'
          },
          {
            test: /.stylus$/,
            loader: 'style-loader!css-loader!stylus-loader'
          },
          // +++++++++++++++++++++++++++++++
          {
            test: /.js$/,
            loader: 'babel-loader'
          }
        ]
      }
    

    8、媒体文件、字体文件、背景图片解析器的配置

    cnpm / npm i file-loader url-loader -D

    添加相关配置信息

    {
      test: /.(png|jpe?g|gif|svg)(?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: path.posix.join('static','img/[name].[hash:7].[ext]')
      }
    },
    {
      test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: path.posix.join('static', 'media/[name].[hash:7].[ext]')
      }
    },
    {
      test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: path.posix.join('static', 'fonts/[name].[hash:7].[ext]')
      }
    }
    

    9、webpack开发服务器

    • vue 项目中 npm run serve 启动开发者服务器

    • webpack 可以配置开发者服务器

    cnpm i webpack-dev-server@2 -g

    cnpm i webpack-dev-server@2 -D

    控制台运行 webpack-dev-server 指令,查看效果

    修改代码继续查看效果,发现代码会自动更新

    10、配置开发者服务器

    10.1 数据请求

    cnpm i axios -S

    src/main.js 处请求数据,遇到跨域问题

    import './main.css';
    import axios from 'axios';
    console.log('hello webpack! 开发者服务器')
    axios.get('http://47.92.152.70/pro').then(res => {
      console.log(res.data)
    })
    
    • 添加webpack的配置选项 devServer
    devServer: { // 开发者服务器配置
        host: '0.0.0.0', // 默认值是127.0.0.1,改为0.0.0.0之后局域网内可以通过ip地址访问
        port: 8080, // 默认访问服务器的端口号
        // open: true, // 打开默认浏览器,一般设置为false
        proxy: { // 解决跨域问题
          '/api': {
            target: 'http://47.92.152.70', // 代理哪一个服务器
            changeOrigin: true, // 代理
            pathRewrite: {
              '^/api': '' // 以 /api 开头的请求,认为就是请求的代理
              // /api/pro   ===> http://47.92.152.70/pro
            }
          }
        }
      }
    

    修改请求代码,查看效果

    axios.get('/api/pro').then(res => {
      console.log(res.data)
    })
    

    11、添加服务器的启动命令

    • package.json文件中添加scripts选项
    "scripts": {
      "dev": "webpack-dev-server",
      "build": "webpack"
    },
    

    12、配置@符号

    resolve: {
      extensions: ['.js', '.vue', '.jsx'], // 代表缺省的后缀名,引入时可以省略的后缀名 --- import axios from './request'; 而不用 import axios from './request.js';
      alias: { // 别名
        '@': path.join(__dirname, './', 'src') // src 的别名为 @
      }
    }
    

    13、webpack + vue

    webpack配置别名

    resolve: {
        extensions: ['.js', '.vue', '.jsx'], // 代表缺省的后缀名,引入时可以省略的后缀名 --- import axios from './request'; 而不用 import axios from './request.js';
        alias: { // 别名
          '@': path.join(__dirname, './', 'src'), // src 的别名为 @
          // +++++++++++++++++++++++++++
          'vue$': 'vue/dist/vue.esm.js' // 打包vue项目必须得写的别名
        }
      }
    
    • 安装vue的依赖

    cnpm i vue -S

    cnpm i vue-loader@14 vue-template-compiler -D

    配置vue文件的解析器

    {
      test: /.vue$/,
      loader: 'vue-loader'
    }
    

    剩下的就是普通的vue的项目开发

    14、初体验react

    cnpm i react react-dom -S

    15、复习es6的语法

    15.1 es6 class

    补充webpack配置

    通过运行不同的命令,表示不同的环境

    cnpm i cross-env -D

    修改packages.json

    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
        "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
      },
    

    修改webpack.config.js

    const isDev = process.env.NODE_ENV =='development'
    plugins: [ // 添加插件 ---- 数组
      new webpack.optimize.UglifyJsPlugin(), // 压缩js文件
      new webpack.DefinePlugin({ // ++++++++++++++
        'process.env':{
          NODE_ENV:isDev?'"development"':'"production"',
        }
      }),
      new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
        template: 'index.html' // 找的就是当前文件夹下的index.html文件
      })
    ],
    
  • 相关阅读:
    用Visual C#实现文件下载
    解读C#中的规则表达式
    NET(C#)连接各类数据库集锦
    C#中编写多线程(1)——起步
    C#中的常用加密算法与其它语言的兼容性
    C#的事件处理机制应用
    TCP IP协议之通信详解
    手把手教你AspNetCore WebApi:认证与授权
    TCP IP协议之初识
    mysql中exit和in的区别
  • 原文地址:https://www.cnblogs.com/hy96/p/11890829.html
Copyright © 2020-2023  润新知