webpack

朱雀 2020-09-05 15:52 738阅读 0赞

依赖nodejs

创建一个demo目录

mkdir webpack-demo && cd webpack-demo
    npm init -y
    npm install --save-dev webpack

## 将接口代理到本地 ##

## devServer.proxy ##

## \#代码拆分 ##

完成两类分离工作：

1.分离资源，实现缓存资源和并行加载资源

1）分离第三方库，因为它们基本保持不变，可以长时间缓存在用户的机器上。

如何使用 CommonsChunkPlugin 分离 vendor/library 代码

使用上面的 webpack 配置，我们看到生成了三个bundle：`vendor`、`main`和`manifest`

`vendor:第三方库`

`main:应用代码`

`manifest:webpack runtime 代码，用来帮助 webpack 完成其工作`

`长效的 bundle 缓存是通过“基于内容的 hash 策略”来实现的（content-based hashing）`

`需要在webpack.config.js中修改配置：`

2）分离CSS

如何使用 `ExtractTextWebpackPlugin` 来分离 css

本来webpack打包CSS时，使用了css-loader（它输出CSS作为JS模块），这个有个缺点就是将无法利用浏览器的异步和并行加载CSS的能力，网页必须等待，直到您的整个JavaScript 包下载完成，然后重绘网页。那么分离css就解决了这个问题。

只需要在`webpack.config.js`文件中添加两个步骤即可。

module.exports = {
        module: {
             rules: [{
                 test: /\.css$/,
    -            use: 'css-loader'
    +            use: ExtractTextPlugin.extract({
    +                use: 'css-loader'
    +            })
             }]
         },
    +    plugins: [
    +        new ExtractTextPlugin('styles.css'),
    +    ]
    }

3）按需分离（动态分离，前面两种是预先在配置中指定分离模块）

###  [如何使用 `require.ensure()` 来分离代码][require.ensure] ###

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

[CommonsChunkPlugin _ vendor_library]: http://www.css88.com/doc/webpack2/guides/code-splitting-libraries
[ExtractTextWebpackPlugin_ css]: http://www.css88.com/doc/webpack2/guides/code-splitting-css
[require.ensure]: http://www.css88.com/doc/webpack2/guides/code-splitting-require