*?Webpack
作用：是當(dāng)下前端工程化環(huán)境中使用最為廣泛的構(gòu)建工具料睛，它的作用是把比較新的前端技術(shù)和文件模塊疮方，編譯打包成瀏覽器能夠識(shí)別、并且能夠盡可能兼容主流瀏覽器的代碼（HTML溪厘、CSS狮鸭、ES5）合搅，它就是一個(gè)打包器。
##?1歧蕉、安裝webpack
*?webpack?是核心庫(kù)灾部，它提供了很多?API，可以用于編程
*?webpack-cli?是命令行工具惯退，它提供了一些很好用的命令行
cnpm?install?webpack?-g
cnpm?install?webpack-cli?-g
cnpm?install?webpack?-D
cnpm?install?webpack-cli?-D
*?使用配置文件
??webpack運(yùn)行或打包時(shí)梳猪，默認(rèn)使用?webpack.config.js這個(gè)文件。
*?webpack-dev-server
??它是使用express來編寫的用于創(chuàng)建本地node服務(wù)器的第三方包
??```
??webpack?serve?--config?react.config.js
??```
入口
出口
loaders
plugins
```JavaScript
const?path?=?require("path")
//
module.exports?=?{
????//設(shè)置入口參數(shù)
????entry:?{
????????app:?path.resolve(__dirname,?"./src/main.js")//這里可以使用相對(duì)路徑
????},
????//設(shè)置出口參數(shù)
????output:?{
????????filename:?"[name].[chunkhash].js",
????????path:?path.resolve(__dirname,?'dist')//這里必須使用絕對(duì)路徑
????},
????devServer:?{
????????contentBase:?path.join(__dirname,?"./public"),
????????port:?9999,
????????open:?true
????},
}
```
##?2.?安裝webpack-dev-server
它是使用express來編寫的用于創(chuàng)建本地node服務(wù)器的第三方包
npm?install?webpack-dev-server?-D
npm?install?webpack-dev-server?-g
本地和全局都安裝一遍
最新版本啟動(dòng)命令
webpack?serve?--config?react.config.js
##?3.安裝html-webpack-plugin
創(chuàng)建HTML文件,用于服務(wù)器訪問
功能?:自動(dòng)將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
在每次執(zhí)行npm?run?build時(shí),自動(dòng)幫我們清理掉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眼中一切皆模塊蒸痹，每一種模塊都需要對(duì)應(yīng)的loaders來加載處理
?*?1.安裝?style-loader?和?css-loader
????sass是Sass的編譯器春弥，它的作用是把sass-loader加載進(jìn)來的scss文件編譯成css文件。用于在js中導(dǎo)入css文件時(shí)候,能夠解析
????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加載進(jìn)來的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規(guī)則可以在一起簡(jiǎn)寫
????```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.關(guān)于babel模塊
????babel-loader用于加載.js文件,并交給@babel/*編輯器
????????需要安裝(1).?npm?install?babel-loader?-D
????????????????(2).npm?install?@babel/core?-D?//?這是babel的核心庫(kù),用來編譯es6代碼轉(zhuǎn)換處理
????????????????(3)?npm?install?@babel/preset-env?-D??//?//?@babel/preset-env作用是把ES6編輯成流量瀏覽器能夠兼容的ES5代碼
????*?5?使用ESLint檢測(cè)代碼
????檢測(cè)代碼規(guī)范
????安裝包?npm?install?eslint-webpack-plugin?-D
????根目錄下新建.eslintrc.json文件,填寫代碼的規(guī)范,規(guī)則
????react.config.js中
????```JavaScript
????//引入eslint-webpack-plugin
??????const?ESLintPlugin?=?require('eslint-webpack-plugin')
??????plugins:?[
????????new?ESLintPlugin({
????????????exclude:?['node_modules'],
????????????fix:true?//添加這個(gè)字段之后能夠自動(dòng)修復(fù)一些簡(jiǎn)單的錯(cuò)誤.,不過不建議添加
????????????})
??????],
??????devServer:{
????????overlay:{
????????????errors:true
????????}???//報(bào)錯(cuò)幕布是否顯示
??????}
????```
????添加注釋?//eslint-disable-line
????可以使報(bào)錯(cuò)的地方跳過eslint檢測(cè)
????也可以使用?
????/*eslint-disable*/
????aler("foo這是規(guī)則不通過的代碼")
????/*eslint-enable*/
????包含住的代碼臺(tái)哦過eslint檢測(cè)
????*?6?cross-env?給環(huán)境增加環(huán)境變量
????npm?install?cross-env?-D
????用來區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境
????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)
????注意區(qū)分生產(chǎn)環(huán)境和開發(fā)環(huán)境的區(qū)別
##?6.別名寫法?和?省略后綴寫法
生產(chǎn)環(huán)境的配置添加
```JavaScript
????????resolve:?{
????????????????alias:?{
????????????????????//@別名寫法
????????????????????"@":?path.resolve(__dirname,?"src")
????????????????},
????????????????//可以省略下面的后綴名
????????????????extensions:?['.js',?'.jsx',?'.ts',?'.json',?'.css',?'.vue']
????????????}
```
##?7.react初體驗(yàn)
(1).安裝?react
npm?install?react?-S
npm?instal?react-dom?-S
npm?install?@babel/preset-react?-D??//可以讓js文件中識(shí)別jsx語(yǔ)法??需要再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
????}
}
//函數(shù)式組件,組件定義
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'))
```
即可導(dǎo)出react?組件到頁(yè)面上顯示出來
