* Webpack
作用：是当下前端工程化环境中使用最为广泛的构建工具，它的作用是把比较新的前端技术和文件模块，编译打包成浏览器能够识别、并且能够尽可能兼容主流浏览器的代码（HTML、CSS、ES5），它就是一个打包器。
## 1、安装webpack
* webpack 是核心库，它提供了很多 API，可以用于编程
* webpack-cli 是命令行工具，它提供了一些很好用的命令行
cnpm install webpack -g
cnpm install webpack-cli -g
cnpm install webpack -D
cnpm install webpack-cli -D
* 使用配置文件
webpack运行或打包时，默认使用 webpack.config.js这个文件。
* webpack-dev-server
它是使用express来编写的用于创建本地node服务器的第三方包
```
webpack serve --config react.config.js
```
入口
出口
loaders
plugins
```JavaScript
const path = require("path")
//
module.exports = {
//设置入口参数
entry: {
app: path.resolve(__dirname, "./src/main.js")//这里可以使用相对路径
},
//设置出口参数
output: {
filename: "[name].[chunkhash].js",
path: path.resolve(__dirname, 'dist')//这里必须使用绝对路径
},
devServer: {
contentBase: path.join(__dirname, "./public"),
port: 9999,
open: true
},
}
```
## 2. 安装webpack-dev-server
它是使用express来编写的用于创建本地node服务器的第三方包
npm install webpack-dev-server -D
npm install webpack-dev-server -g
本地和全局都安装一遍
最新版本启动命令
webpack serve --config react.config.js
## 3.安装html-webpack-plugin
创建HTML文件,用于服务器访问
功能 :自动将html,js,css文件组装在一起,放在打包完的dist文件中
npm install html-webpack-plugin -D
```JavaScript
//用于把打包后的js/css等资源,自定插入到public/index.html中
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
title: "2009",
publicPath: ""
})
],
```
## 4.安装clean-webpack-plugin
在每次执行npm run build时,自动帮我们清理掉dist
npm install clean-webpack-plugin -D
```JavaScript
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
//plugins
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
title: "2009",
publicPath: ""
}),
new CleanWebpackPlugin()
],
```
如何开启热更新:最新版本下,在 devServer中添加: hot:true 即可
## 5.loaders
在webpack眼中一切皆模块，每一种模块都需要对应的loaders来加载处理
* 1.安装 style-loader 和 css-loader
sass是Sass的编译器，它的作用是把sass-loader加载进来的scss文件编译成css文件。用于在js中导入css文件时候,能够解析
npm install style-loader css-loader -D
```JavaScript
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
]
},
```
* 2.安装sass-loader node-sass webpack
sass是Sass的编译器，它的作用是把sass-loader加载进来的scss文件编译成css文件。
npm install sass-loader node-sass webpack -D
或者新版写法
npm install sass-loader sass webpack -D
```JavaScript
module: {
rules: [
{ test: /\.scss$/, use: ['style-loader', 'css-loader', "sass-loader"] }
]
},
```
css和sass规则可以在一起简写
```JavaScript
module: {
rules: [
{ test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
},
```
* 3.安装file-loader
file-loader的作用，是专门用于加载图片资源的。
npm install file-loader -D
```JavaScript
module: {
rules: [
{ test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
]
},
```
* 4.关于babel模块
babel-loader用于加载.js文件,并交给@babel/*编辑器
需要安装(1). npm install babel-loader -D
(2).npm install @babel/core -D // 这是babel的核心库,用来编译es6代码转换处理
(3) npm install @babel/preset-env -D // // @babel/preset-env作用是把ES6编辑成流量浏览器能够兼容的ES5代码
* 5 使用ESLint检测代码
检测代码规范
安装包 npm install eslint-webpack-plugin -D
根目录下新建.eslintrc.json文件,填写代码的规范,规则
react.config.js中
```JavaScript
//引入eslint-webpack-plugin
const ESLintPlugin = require('eslint-webpack-plugin')
plugins: [
new ESLintPlugin({
exclude: ['node_modules'],
fix:true //添加这个字段之后能够自动修复一些简单的错误.,不过不建议添加
})
],
devServer:{
overlay:{
errors:true
} //报错幕布是否显示
}
```
添加注释 //eslint-disable-line
可以使报错的地方跳过eslint检测
也可以使用
/*eslint-disable*/
aler("foo这是规则不通过的代码")
/*eslint-enable*/
包含住的代码台哦过eslint检测
* 6 cross-env 给环境增加环境变量
npm install cross-env -D
用来区分开发环境和生产环境
package.json中
"build": "cross-env NODE_ENV=production webpack --config react.config.js",
"start": "cross-env NODE_ENV=development webpack serve --config react.config.js"
react.config.js中添加
const isDev = process.env.NODE_ENV === "development"
console.log('----------', isDev, process.env.NODE_ENV)
(如果 npm start 输出为----------true, development)
(如果 npm run build 输出 ---------- false production)
注意区分生产环境和开发环境的区别
## 6.别名写法 和 省略后缀写法
生产环境的配置添加
```JavaScript
resolve: {
alias: {
//@别名写法
"@": path.resolve(__dirname, "src")
},
//可以省略下面的后缀名
extensions: ['.js', '.jsx', '.ts', '.json', '.css', '.vue']
}
```
## 7.react初体验
(1).安装 react
npm install react -S
npm instal react-dom -S
npm install @babel/preset-react -D //可以让js文件中识别jsx语法 需要再babel.config.js中 "presets": ["@babel/preset-env", "@babel/preset-react"]
src下面新建App.js
```JavaScript
import React from "react"
const ele = <h1>hello react</h1>
//类组件,组件定义
class App extends React.Component {
render() {
return ele
}
}
//函数式组件,组件定义
function App() {
return ele
}
export default App
```
mian.js
```JavaScript
import React from "react"
import ReactDOM from "react-dom"
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))
```
即可导出react 组件到页面上显示出来
