# webpack-code-spliter

> webpack code split for react isormophic

Latest version **2.0.3** (published 2018-10-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-code-spliter
pnpm add webpack-code-spliter
yarn add webpack-code-spliter
bun add webpack-code-spliter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2018-10-15 |
| First published | 2017-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | beven |

## Links

- npm: https://www.npmjs.com/package/webpack-code-spliter
- Repository: https://github.com/Beven91/webpack-code-spliter
- Homepage: https://github.com/Beven91/webpack-code-spliter#readme
- Issues: https://github.com/Beven91/webpack-code-spliter/issues
- npm.io page: https://npm.io/package/webpack-code-spliter

## Dependencies (3)

- [fs-extra](https://npm.io/package/fs-extra.md) ^4.0.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [code-spliter-router](https://npm.io/package/code-spliter-router.md) ^1.0.3

## Recent versions

- 2.0.3 (latest) — 2018-10-15
- 2.0.2 — 2018-10-15
- 2.0.1 — 2018-04-15
- 2.0.0 — 2018-04-10
- 1.0.18 — 2018-02-14
- 1.0.17 — 2018-01-12
- 1.0.16 — 2017-11-15
- 1.0.15 — 2017-11-15
- 1.0.14 — 2017-11-15
- 1.0.13 — 2017-11-15
- 1.0.12 — 2017-11-15
- 1.0.11 — 2017-11-15
- 1.0.10 — 2017-08-05
- 1.0.9 — 2017-07-18
- 1.0.8 — 2017-07-18
- … 8 more at https://npm.io/package/webpack-code-spliter/versions

## README

# webpack-code-spliter

[![NPM version][npm-image]][npm-url]

### 一、简介

用于实现webpack代码拆分，主要用于异步加载模块，
但是在react同构模式下，异步加载会导致checksum不一致，
所以使用此工具，用于解决react同构模式下的代码拆分

> 原理：当浏览器访问同构页面时服务端根据url.pathname返回对应的拆分js

<p>例如拆分后文件如下：</p>

- app.js 

- common.js

- pages/index.split.js

- pages/user.split.js

- pages/login.split.js

<p>当浏览器访问user页面时服务端返回:</p>

- common.js

- pages/user.split.js

- app.js


### 二、安装

    npm install webpack-code-spliter --save
     
### 三、Webpack使用

```js
var CodeSpliterPlugin  = require('webpack-code-spliter').CodeSpliterPlugin;
/* 格式:  要拆分的js路径?name=路由路径
*  例如:  ./routers/user/login.js?name=user/login
*  目的： ?name=user/login 解决代码拆分造成同构checksum问题
*  原理:  当路由匹配到?name的值，会在同构时同步加载对应拆分的js 如果是客户端pushstate则异步加载
*  [
*    'index=user/login', //特殊项 用于配置/对应的路由
*    './routers/user/login.js?name=user/login'
*/
var spliter = CodeSpliterPlugin.configure([
    './user/login.jsx?name=user/login',
    './user/register.jsx?name=user/register',
])

module.exports = {
    output: {
        chunkFilename: '[name]',
    },
    plugins:[
        //targetRoot ：发布目标web运行根目录即目标(process.cwd())
        //isormopic: 是否为react同构代码拆分 默认为 true 如果为false  不会生成spliter.json(同构路由映射文件自动生成)
        new CodeSpliterPlugin(targetRoot,isormopic)
    ],
    module:{
        loaders:[
            {
                test: /\.js$|\.jsx$/,
                include: spliter.includes,
                loader: [
                    {
                        loader:spliter.loader,
                        options:spliter.options
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: babelRc.presets,
                            plugins: babelRc.plugins
                        }
                    }
                ]
            }
        ]
    }
}
```

### 四、关于SSR使用

安装:

     npm install code-spliter-router --save

代码示例:

```js

import ReactDOMServer from 'react-dom/server';
import ApplicationComponent from './src/app/index.js';
import CodeSpliterRouter from 'code-spliter-router';

//app =  express()
app.use('/react',(req,resp,next)=>{
    let initialHTML = ReactDOMServer.renderToString(ApplicationComponent)
    let routejs = CodeSpliterRouter.getRoutejs(req);
    let options = {
        title: '页面标题',
        routejs:routejs
        initialHTML: initialHTML,
    };
    resp.render('react', options);
})

/* 
    react.hbs:
    <html>
        <head>
            <title>{{title}}</title>
            ....
        </head>
        <body>
            <div id="app">{{{initialHTML}}}</div>
            <script type="text/javascript"  src="/app/common.js"></script>
            {{#if pagejs}}
            <script type="text/javascript"  src="/app/{{routejs}}"></script>
            {{/if}}
            <script type="text/javascript"  src="/app/app.js"></script>
        </body>
    </html>

*/

```

### 五、开源许可
基于 [MIT License](http://zh.wikipedia.org/wiki/MIT_License) 开源，使用代码只需说明来源，或者引用 [license.txt](https://github.com/sofish/typo.css/blob/master/license.txt) 即可。

[npm-url]: https://www.npmjs.com/package/webpack-code-spliter
[npm-image]: https://img.shields.io/npm/v/webpack-code-spliter.svg

---
_Source: https://npm.io/package/webpack-code-spliter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._