webpack4.0初探

webpack4.0发布了一段时间了，本文稍微研究下

1.webpack-cli必须

默认安装了webpack，执行时，会报错，需要装上webpack-cli

2.不再需要webpack.config.js

默认情况下，已经不再需要这个配置文件，它已经有了最基本的配置，此时，我们执行了webpack命令，看看效果

image.png

一个警告，一个报错，忽略警告，看看报错，应该是需要一个src默认的文件保存路径，加上之后，再运行看看，警告依然在，但是错误没了，也生成了文件，在dist下面

image.png

3.mode有development和production模式

还记得层级的uglify-js之类的plugin吗，webpack4已经不需要了，提供了development和production模式

  "scripts": {    "start": "webpack --mode development",    "build": "webpack --mode production"
  }

4.默认对js的支持程度

class A{    constructor(){
        alert('cccc')
    }
}new A()var B= ()=>{
    alert('arrow function')
}
B()

一开始，我用chrome（版本 63.0.3239.132（正式版本） （64 位））和ios11来访问，直接是好了，吓了一跳，以为连babel之类的都不用配置了，后来发现我的Mini2一直ios8，试着访问，alert失效，那肯定是不支持，又用了ie11,还是不支持，所以还是需要配置文件的，所以，webpack4所指的零配置，应该是entry,output,mode，本demo中，是在ios8下报这个错

TypeError: Map constructor does not accept arguments

从字面来看，应该是Map不支持，我在入口文件import 了babel-polyfill问题解决

5.css处理

曾经我们都是用extract-text-webpack-plugin这个来抽去css文件，webpack4中已经废弃了（Unfortunately said plugin does not play well with webpack 4.），推荐的是mini-css-extract-plugin

6.React hello world

由上面的结论，我们就可以来实现一个简单的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"));

这样就实现了一个最简单的react demo

7. dev server

一般情况下，开发模式下，我们要启动一个服务，用于监听文件修改时页面的热加载，这个webpack为我们考虑好了，我们只需要按照如下配置即可

npm i webpack-dev-server --save-dev

然后定义一个命令用于启动服务

webpack-dev-server --mode development --open

由于我们使用了MiniCssExtractPlugin，这个时候在development下，scss修改，页面是不会刷新的，所以开发模式下，需要去掉css的抽取，改用如下的配置

use: ["style-loader", "css-loader?modules=true", "sass-loader"] 开发模式

8. redux

具体的redux的引用请看我以前的一篇文章https://www.jianshu.com/p/abf44b4a4c7c，或者参考https://github.com/chenbin2015/react-redux-es6-quickstart，本模块我们只介绍一些基本对象

8.1 redux

• createStore
  用来创建一个store，并注册到provider中

• combineReducer
  合并reducer

• bindActionCreators
  将action绑定到组件上
  另外的applyMiddleWare和compose本demo暂不提及

8.2 react-redux

• connect

• Provider

9. 路由

路由的原理，可以参考https://www.jianshu.com/p/b66f56c65049，本文中使用react-router-redux，我们就按照官网的demo进行配置吧,看下具体变化

//没有开启服务端，所以使用hashimport 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>

建议还是了解原理吧，这边只是适应引用包的语法糖，没啥好说的

10. 按需加载

按需加载的原理，我以前讲过了，参考https://www.jianshu.com/p/b66f56c65049这个吧
目前react-route提供了react-loadable，这个能很方便地为我们实现按需加载的功能，一步步来即可
先安装react-router-redux，根据它的语法，我们还需要安装babel的一个插件babel-plugin-syntax-dynamic-import,接下来就是写我们的组件了

image.png

我们的组件分成了两部分
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是具体的组件内容，loading官方的说法是一个placeholder（loading is a placeholder component to show while the real component is loading），这个具体的有时间再研究下，目前看来就是在路由切换时有一个过渡的过程，主要的是loader，这个就是去引用具体的组件内容，接下来，我们执行下生产模式

image.png

图中的0和1就是按需生成的js文件，路由变化时，会去加载不同的js

目前，实现了开发模式和生产模式的简单配置，如果要用到线上，还需要eslint，immutable啥的，这里就不展开了，其实webpack4的出现，也是对曾经版本的继承与优化，要不断地随着技术的发展来提升自己即可，代码放到这里了

参考资料:https://www.valentinog.com/blog/webpack-4-tutorial/

作者：cb12hx
链接：https://www.jianshu.com/p/d7879ffdb844