webpack4.0發(fā)布了一段時間了，本文稍微研究下
1.webpack-cli必須
默認(rèn)安裝了webpack庭猩，執(zhí)行時痪署，會報錯，需要裝上webpack-cli
2.不再需要webpack.config.js
默認(rèn)情況下吱涉，已經(jīng)不再需要這個配置文件刹泄，它已經(jīng)有了最基本的配置，此時怎爵，我們執(zhí)行了webpack命令特石，看看效果
一個警告，一個報錯鳖链，忽略警告姆蘸，看看報錯，應(yīng)該是需要一個src默認(rèn)的文件保存路徑芙委，加上之后逞敷，再運行看看，警告依然在灌侣，但是錯誤沒了推捐，也生成了文件，在dist下面
3.mode有development和production模式
還記得層級的uglify-js之類的plugin嗎侧啼，webpack4已經(jīng)不需要了牛柒，提供了development和production模式
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
}
4.默認(rèn)對js的支持程度
class A{
constructor(){
alert('cccc')
}
}
new A()
var B= ()=>{
alert('arrow function')
}
B()
一開始，我用chrome（版本 63.0.3239.132（正式版本） （64 位））和ios11來訪問慨菱，直接是好了焰络，嚇了一跳，以為連babel之類的都不用配置了符喝，后來發(fā)現(xiàn)我的Mini2一直ios8，試著訪問甜孤，alert失效协饲，那肯定是不支持，又用了ie11,還是不支持缴川，所以還是需要配置文件的茉稠，所以，webpack4所指的零配置把夸，應(yīng)該是entry,output,mode而线，本demo中，是在ios8下報這個錯
TypeError: Map constructor does not accept arguments
從字面來看恋日，應(yīng)該是Map不支持膀篮，我在入口文件import 了babel-polyfill問題解決
5.css處理
曾經(jīng)我們都是用extract-text-webpack-plugin這個來抽去css文件，webpack4中已經(jīng)廢棄了（Unfortunately said plugin does not play well with webpack 4.）岂膳，推薦的是mini-css-extract-plugin
6.React hello world
由上面的結(jié)論誓竿，我們就可以來實現(xiàn)一個簡單的react demo了，要做的事情谈截，需要處理js筷屡，需要處理css涧偷，那么仍然需要config.js
const HtmlWebPackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7", "iOS >= 8"]
}
}], 'react'
],
"plugins": [
"transform-runtime"
]
}
}
},
{
test: /\.html$/,
use: [{
loader: "html-loader"
}]
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader?modules=true", "sass-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
這是配置文件，主要是對js和scss做了處理毙死，再看看react部分
import React, { Component } from "react"
import ReactDOM from "react-dom"
import styles from './main.scss'
class App extends Component {
componentDidMount() {
console.log('ssssss:', styles)
}
render(){
return (
<div className={styles.test}>
<p>Hello webpack4.0</p>
</div>
)
}
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
這樣就實現(xiàn)了一個最簡單的react demo
7. dev server
一般情況下燎潮，開發(fā)模式下，我們要啟動一個服務(wù)扼倘，用于監(jiān)聽文件修改時頁面的熱加載确封，這個webpack為我們考慮好了，我們只需要按照如下配置即可
npm i webpack-dev-server --save-dev
然后定義一個命令用于啟動服務(wù)
webpack-dev-server --mode development --open
由于我們使用了MiniCssExtractPlugin唉锌，這個時候在development下隅肥，scss修改，頁面是不會刷新的袄简，所以開發(fā)模式下腥放，需要去掉css的抽取，改用如下的配置
use: ["style-loader", "css-loader?modules=true", "sass-loader"] 開發(fā)模式
8. redux
具體的redux的引用請看我以前的一篇文章http://www.reibang.com/p/abf44b4a4c7c绿语，或者參考https://github.com/chenbin2015/react-redux-es6-quickstart秃症，本模塊我們只介紹一些基本對象
8.1 redux
- createStore
用來創(chuàng)建一個store，并注冊到provider中 - combineReducer
合并reducer - bindActionCreators
將action綁定到組件上
另外的applyMiddleWare和compose本demo暫不提及
8.2 react-redux
- connect
- Provider
9. 路由
路由的原理吕粹，可以參考http://www.reibang.com/p/b66f56c65049种柑，本文中使用react-router-redux，我們就按照官網(wǎng)的demo進行配置吧,看下具體變化
//沒有開啟服務(wù)端匹耕，所以使用hash
import createHistory from 'history/createHashHistory'
import { Route } from 'react-router'
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'
import Home from './containers/Home'
import About from './containers/About'
import App from './containers/Demo'
const history = createHistory()
const middleware = routerMiddleware(history)
const store = createStore(
combineReducers({
reducers,
router: routerReducer
}),
applyMiddleware(middleware)
)
<Provider store = { store } >
<ConnectedRouter history={history}>
<div>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</div>
</ConnectedRouter>
</Provider>
建議還是了解原理吧聚请，這邊只是適應(yīng)引用包的語法糖，沒啥好說的
10. 按需加載
按需加載的原理稳其，我以前講過了驶赏，參考http://www.reibang.com/p/b66f56c65049這個吧
目前react-route提供了react-loadable，這個能很方便地為我們實現(xiàn)按需加載的功能既鞠，一步步來即可
先安裝react-router-redux煤傍，根據(jù)它的語法，我們還需要安裝babel的一個插件babel-plugin-syntax-dynamic-import,接下來就是寫我們的組件了
我們的組件分成了兩部分
index.js
import React, { Component } from 'react'
import Loadable from 'react-loadable'
import Loading from '../Loading'
const LoadableComponent = Loadable({
loader: () => import('./entry'),
loading: Loading,
});
export default class App extends Component {
render() {
return <LoadableComponent/>;
}
}
其中的loader是具體的組件內(nèi)容嘱蛋，loading官方的說法是一個placeholder（loading is a placeholder component to show while the real component is loading）蚯姆，這個具體的有時間再研究下，目前看來就是在路由切換時有一個過渡的過程洒敏，主要的是loader龄恋，這個就是去引用具體的組件內(nèi)容，接下來桐玻，我們執(zhí)行下生產(chǎn)模式
圖中的0和1就是按需生成的js文件篙挽，路由變化時，會去加載不同的js
目前镊靴，實現(xiàn)了開發(fā)模式和生產(chǎn)模式的簡單配置铣卡，如果要用到線上链韭，還需要eslint，immutable啥的煮落，這里就不展開了敞峭，其實webpack4的出現(xiàn)，也是對曾經(jīng)版本的繼承與優(yōu)化蝉仇，要不斷地隨著技術(shù)的發(fā)展來提升自己即可旋讹，代碼放到這里了
