webpack运行项目知识
项目初始化
- git init：将本地文件夹变成git可以管理的仓库；
- 开发过程中，要通过git工作流，把项目传到远程的github上去；
- git工作流
- npm init --y:包管理器项目初始化
- 创建package.json文件；
配置文件分析
-
.babel:用来配置babel; babel的主要作用是用来编译；把不支持的语言，编译成支持的语言；
- 要使用babel:必须下载工具：babel-cli babel-core
- 支持es6:
- babel-loader（编译js文件,让JS文件可以运行）(注明下载7.1.5版本，否则会报错)
- babel-preset-es2015（编译es6，让es6语法编译成es5）
- babel-preset-stage-0（支持箭头函数：保证this指向）
- 支持react
- babel-preset-react（支持react）
-
webpack.config.js：配置webpack;
- webpack（本地运行）
- webpack-dev-server（服务器运行）
- webpack-cli
下载html-webpack-plugin：用于html模板；
-
.gitignore:在把项目用github管理的时候，忽略掉哪些文件上传；
- 不传第三方插件；如node_modules;
项目结构
- 项目结构：分为三块：
- 自己封装的自定义的模块组件，如Header.js,Footer.js；
- 装所有组件的容器，如index.js；
- 页面html文件，将组件容器引入，如index.html;
解决问题
- 在JS文件中通过es6引入模块，会出现报红的问题；通过以下设置解决
- 设置setting->Languages&Frameworks->JavaScript->JavaScirpt language version->React JSX
项目开发总结
- 把项目变成git可以管理的仓库，同时，初始化项目
git initnpm init --y
- 当前项目文件的创建
-
.gitignore：忽略给github上传哪些文件； -
.babelrc：编译：把不兼容的编译成兼容的； -
webpack.config.js：webpack的配置； -
README.md：当前项目的说明文件； - src文件夹：目录下创建
- component文件夹，存放自定义的模块组件；
- index.html
- index.js
-
- 安装必要的插件
- babel
-
npm i --save-dev- babel-core: 工具
- babel-cli: 工具
- babel-loader:运行JS，注：下载版本为7.1.5,最新版本会报错；代码：
npm i --save-dev babel-loader@7.1.5； - css-loader:运行css
- style-loader:运行css
- babel-preset-es2015: 编译e``s6，让es6语法编译成es
- babel-preset-stage-0: 支持箭头函数：保证this指向
- babel-preset-react: 支持react;
-
- webpack
-
npm i --save-dev- webpack: 本地运行； =》dist目录可以看到
- webpack-dev-server: 服务器运行； =》 dist文件夹下无文件；
- webpack-cli
-
- react:
-
npm i --save- react
- react-dom
-
- html模板插件
-
npm i --save-dev html-webpack-plugin;
-
- babel
- 配置文件：三大类
-
.babelrc- 代码：
{ "presets":["es2015","react","stage-0"], "plugins":[] } - webpack.config.js
- 注意：在开发阶段，先不要压缩；上线再压缩；
- 若生成的bundle.js为压缩文件，在build或start中设置
--mode production
const webpack=require("webpack"); const HtmlWebpackPlugin=require("html-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const path=require("path"); module.exports={ //入口文件：index.js entry:path.resolve(__dirname,"./src/index.js"),//"./"可以省略 //输出的位置 output:{ path:path.resolve(__dirname,"dist"), filename:"bundle.js" }, //配置 module:{ rules:[ {//配置JS test:/\.js(x)?$/, use:"babel-loader", exclude:/node_modules/ }, {//配置css test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, devServer: { disableHostCheck: true, // 新增该配置项，防止浏览器控制台报错； }, //插件 plugins:[ new ExtractTextPlugin("styles.css"),//styles.css是合并后的样式名； new HtmlWebpackPlugin({template:"./src/index.html"}) ], //模型 mode:"development"//还可以设置none，但是不能设置production，否则会提示警告； }; - package.json：配置scripts文件
"script":{ "start":"webpack-dev-server --progress(进度条） --colors(颜色变化） --content-base dist(依赖的最基本的目录)", "build":"webpack --progress --colors" } -
- 写一些react的测试文件
- 自己封装的组件，都放在component文件夹下；
- 把封装好的组件，导入到index.js文件中；
- index.js是入口文件，会被编译打包压缩到bundle.js；
- bundle.js会被自动插入到index.html文件；
- index.html会在服务器下，自动被渲染；
- react的基本语法
- 导入文件：
import ... from ".."
import React from "react"; import ReactDom from "react-dom";- react的写法，用es6的继承
//es6语法引入模块 import React from "react"; //引入自己的css样式 import "./footer.css" class Footer extends React.Component{ render(){ return ( <div id="footer"> {/*我是注释*/} <h1>我是底部标签</h1> </div> ) } } export default Footer;- 导出：
export default Footer;
- 导入文件：
react的基础知识
- JSX：JS+XML
- return里面的jsx可以定义变量，用
{}，如{str}，其中str为变量； - jsx需要注意的问题：
- class => className
-
<label for="xx">=><label htmlfor="xx">
- return里面的jsx可以定义变量，用
- 顶级标签，只能有一个；
- 注释：
- JS中的注释："//"
- return里面jsx的注释，用
{/*xx*/},如{/*注释内容*/}
class Footer extends React.Component{ render(){ return ( <div> {/*我是注释*/} <h1>我是底部标签</h1> </div> ) } } - 正常加载css文件：
- 如果是“小型项目”,可在src目录下，创建一个css文件夹，文件夹下创建一个index.css文件，作为全局样式，引入到index.js中；
- 引入：在index.js中，通过import来引入，地址为相对路径；如：
import "./css/index.css"; - 也就是说，index.js文件下的所有组件都可以设置此样式；
- 引入：在index.js中，通过import来引入，地址为相对路径；如：
- 如果是“大型项目”，相对每个模块都有自己的样式
- 给每个模块，单独创建一个文件夹，比如：Header文件
- header.css
- Header.js:文件中引入自己的css文件；通过import引入；
- 注意：样式里面最好写成唯一的路径；如：
#header h1{ background-color: red; }
- 给每个模块，单独创建一个文件夹，比如：Header文件
- 如果是“小型项目”,可在src目录下，创建一个css文件夹，文件夹下创建一个index.css文件，作为全局样式，引入到index.js中；
- 页面在引入不同的css样式后，会存放在header标签中，会有多个style标签，为了对所有的样式进行合并，需要使用插件：
extract-text-webpack-plugin;- 安装命令：
npm install --save-dev extract-text-webpack-plugin - 注意：若webpack版本在4.x以上，那么需要命令：
npm install --save-dev extract-text-webpack-plugin@next;这样会下载到extract-text-webpack-plugin@4.0.0-beta.0; - 如果本地运行，会在dist文件夹下生成一个编译后的css文件，这个css文件，将多个css文件整合到一起；在编译后的index.html中会通过link插入此css文件；
- 安装命令：
- 如果设置了class类名，引用的时候需要写成className；
- 数据的流动
- 组件自身状态的改变，导致数据的改变 state
- 设置状态：写state在constructor;
constructor(){ super(); //设置初始状态； this.state={ login:false } }- 更改状态：可以通过定时器，也可以通过事件，只要保证this为实例
setTimeout(()=>{ //利用定时器，重新设置state；注意this指向；this为实例 this.setState({ login:true }) },3000); - 父组件的数据传给子组件
- 父组件设置自定义属性，来设置传给子组件的数据；
return( <div> {/*父组件给子组件传递数据，设置属性*/} <Header content={data[1].title}/> <Footer/> </div> )- 子组件通过propos来获取父组件传递的数据
return ( <div id="header"> {/*我是注释*/} <h1>{str}</h1> {/*子组件通过props拿到父组件传递的数据*/} <p>{this.props.content}</p> </div> )
- 组件自身状态的改变，导致数据的改变 state
webpack运行过程中踩过的坑
- babel-loader版本，必须为7.1.5版本；
- model设置中不能设置production，否则会出警告；设置development或none;
- css文件插件安装时，webpack为4.x版本时，需要安装extract-text-webpack-plugin版本为：4.0.0-beta.0；
- 将编译后的bundle.js压缩，在package-json中设置scripts时，在start或build的后面加上
--mode production; - 浏览器的控制台中总是报错
Invalid Host/Origin header，则需要在webpack.config.js中设置devServer: { disableHostCheck: true },来禁用掉disableHostCheck这一配置项。
知识点
- path模块中的resolve
- 定义：用于拼接地址
- 例：
-
path.resolve("/a/b","/c/d.html")=>/c/d.html -
path.resolve("/a/b","c/d.html")=>/a/b/c/d.html -
path.resolve("/a/b","./c/d.html")=>/a/b/c/d.html -
path.resolve("/a/b","../c/d.html")=>/a/c/d.html -
path.resolve(__dirname,"dist")=> 指的是当前文件所在的目录下的dist文件夹；
-
- npm命令
- 安装特定版本插件：
npm install --save-dev babel-loader@7.1.5 - 卸载插件：
npm uninstall babel-loader
- 安装特定版本插件：
代码
- .babelrc代码：
{
"presets":["es2015","react","stage-0"],
"plugins":[]
}
- .gitignore代码：
/node_modules/
- webpack.config.js代码：
const webpack=require("webpack");
const HtmlWebpackPlugin=require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path=require("path");
module.exports={
//入口文件：index.js
entry:path.resolve(__dirname,"./src/index.js"),//"./"可以省略
//输出的位置
output:{
path:path.resolve(__dirname,"dist"),
filename:"bundle.js"
},
//配置
module:{
rules:[
{//配置JS
test:/\.js(x)?$/,
use:"babel-loader",
exclude:/node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
devServer: {
disableHostCheck: true, // 新增该配置项
},
//插件
plugins:[
new ExtractTextPlugin("styles.css"),//styles.css是合并后的样式名；
new HtmlWebpackPlugin({template:"./src/index.html"})
],
//模型
mode:"development"//还可以设置none，但是不能设置production，否则会提示警告；
};
- Header.js代码
//es6语法引入模块
import React from "react";
import "./header.css";
class Header extends React.Component{
constructor(){
super();
//设置初始状态；
this.state={
login:false
}
}
//render为一个函数，类原型上的公有属性方法；
render(){
//登录之后，显示欢迎谁，没登录，先登录；
let str="";
if(this.state.login){
str="欢迎你，guobin";
}else{
str="没登录，先登录"
}
setTimeout(()=>{
//利用定时器，重新设置state；注意this指向；
this.setState({
login:true
})
},3000);
return (
<div id="header">
{/*我是注释*/}
<h1>{str}</h1>
{/*子组件通过props拿到父组件传递的数据*/}
<p>{this.props.content}</p>
</div>
)
}
}
export default Header;
- index.js代码：
import React from "react";
import ReactDom from "react-dom";
import Header from "./component/Header/Header";
import Footer from "./component/Footer/Footer";
//引入css文件，公共样式，所有组件都可以设置
import "./css/index.css";
//设置数据
var data=[
{title:"我是111"},
{title:"我是222"},
{title:"我是333"}
];
class Index extends React.Component{
render(){
return(
<div>
{/*父组件给子组件传递数据，设置属性*/}
<Header content={data[1].title}/>
<Footer/>
</div>
)
}
}
//最后要把Header直接渲染到页面上去；
ReactDom.render(<Index/>,document.getElementById("app"));
- index.html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面</title>
<link href="styles.css" rel="stylesheet"></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
- package.json代码：
{
"name": "day1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --progress --colors --content-base dist",
"build": "webpack --progress --colors"
},
"keywords": [],
"author": "guomushan",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.0.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.13"
},
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0"
}
}
-
文件目录截图
项目文件目录
