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文件
})
],

搭建react的架手架的更多相关文章

  1. React-脚手架

    1. Node和NPM 版本 2. 脚手架 在对React比较熟悉之前,为了避免陷入到开发工具的繁琐配置中,借助react官方提供的脚手架工具Create React App来搭建React应用 np ...

  2. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  3. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  4. 手把手教你在Windows下搭建React Native Android开发环境

    最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...

  5. [转载]Sublime Text 3 搭建 React.js 开发环境

    [转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...

  6. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  7. 1. React介绍 React开发环境搭建 React第一个程序

    什么是 React         React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景         Faceboo ...

  8. React Native开发 - 搭建React Native开发环境

    移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...

  9. Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具

    Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具 A simple CLI for scaffolding React.js ...

  10. [Web 前端] webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

随机推荐

  1. AS3.0和php数据交互POST方式

    AS3.0和php数据交互POST方式首先打开flash建立一个as3.0的文件拖 textarea和button组建到舞台上分别给两个组件命名:txtcontent和addcontent然后点第一帧 ...

  2. react+antd 开发一个可动态增减的复合组件

    需求如图: 与后端协商好的表单数据为: 组件代码: /* 阶梯分成组件 */ import React, { useState, useEffect } from 'react'; import { ...

  3. C语言——使用循环和递归计算阶乘

    使用循环和递归计算阶乘: /*使用循环和递归计算阶乘*/ #include<stdio.h> double fact(int num);//函数声明,阶乘函数,用于循环时调用 double ...

  4. C语言初级阶段7——指针2——特殊指针

    C语言初级阶段7--指针2--特殊指针 指针函数:是一个函数,返回值类型是一个指针. #include<stdio.h> int* fun() { //a是一个局部变量 int a = 1 ...

  5. FCC 高级算法题 收银机找零钱

    Exact Change 设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) ...

  6. 穿透式监管与CTP

    https://blog.csdn.net/wowotuo/article/details/90454013 代码示例: https://tashaxing.blog.csdn.net/article ...

  7. C++ 几款IDE和编程平台的选择分析

    最近闲来无事,就研究了一下几个编程平台和IDE.首先,我必须强调一下,这些方案研究并不一定适用于商业公司内部编程平台选择,而是给个人学习或者闲暇之余把玩用的.主要从以下几个指标考量:使用体验.跨平台. ...

  8. 最大公约数与最小公倍数_c/c++

    gcd:greatest common divisor,最大公约数   欧几里得算法,也就是辗转相除法.公式:gcd(a, b) = gcd(b, a % b)   推论:gcd(b, a) == g ...

  9. PHP 计算一个月第一天和最后一天

    $fistday= date('Y-m-1 23:59:59'); $lastday= strtotime("$fistday+1 month -1 day");

  10. Fiddler之常用的操作

    Fiddler操作 一.首次安装 1.设置https Tools → Options → https 第一次选择安装证书,如图 2.无法正常显示https请求 重置所有证书,重置后会重新提示安装证书, ...