webpack进阶(为啥标题要凑足十个字!)

释放双眼,带上耳机,听听看~!

当我们学一个东西时,总不甘心只是学点表面皮毛,了解得越多就越想把他弄清楚。今天我要分享的内容是webpack进阶的内容,相对于前面讲的会更加深入,分为以下几点:

1、webpack热更新

2、公共模块打包

3、css预处理

暂时就分享这三个方面的内容,感兴趣的小伙伴可以看下去。

webpack热更新
热更新是什么意思呢?就是在不刷新页面的情况下,页面内容自动变更。webpack要怎么实现呢?这里有三点关键的地方要注意:
1、必须是单页面里面的某个模块(主页面index.html就不行,为什么?因为没刷新页面)。
2、必须在每个模块入口最前面加上一个热部署模块。以webpack-hot-middleware为例,入口文件必须在前面加上webpack-hot-middleware/client?reload=true,否则不行,很关键!

const webpackBaseConfig = require('./webpack.base.config');

Object.keys(webpackBaseConfig.entry).forEach(function (name) {
  if (name !== 'vonder') {
    webpackBaseConfig.entry[name] = ['webpack-hot-middleware/client?reload=true'].concat(webpackBaseConfig.entry[name])
  }
});

当然此处也能自己建一个文件,里面require(‘webpack-hot-middleware/client?reload=true’), (vue-cli生成的文件就是这么干的),不过看得莫名其妙,不如直接写来的优雅~

3、必须在plugins中加上webpack.HotModuleReplacementPlugin

 plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ]

做到以上三点,就能做到热模块替换,三点中缺一不可,切记切记!!

公共模块打包

我们使用webpack通常是为了模块管理、压缩打包等功能。假如我们有几个公共js或者第三方js文件,很明显我们不希望由于更改了点页面逻辑的时候让用户从新下载(一般第三方库还不小,自己页面逻辑还比较小)。此时就要用到公共模块打包这个东西了。wbpack提供了一个打包公共模块的插件,webpack.optimize.CommonsChunkPlugin,使用的时候在plugins里面加上就行了:

 plugins: [
     new webpack.optimize.CommonsChunkPlugin({
     name: 'commons/commons',
     }),
 ]

当然,最好是把要提取的公共模块在入口文件里注明,像这样:

entry: {
    app: [resolve('../src/index.js')],
    vendor: ['vue', 'jquery']
  },

当然,如果你只是这样用,会发现一个问题,每次改动页面逻辑,你的公用common.js文件的hash值也会变,怎么办?两步走,首先打包用的chunkhash,具体问什么可以自行百度。第二在plugins里面再加一个公共模块打包,像这样:

 new webpack.optimize.CommonsChunkPlugin({
     name: 'commons/commons',
   }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'commons/manifest',
      chunks: ['vendor']
    }),

这样会生成两个文件,commons.js和vendor.js,你会发现common.js内容就是你引用的第三方包或者公共文件,每次改变页面逻辑commons.js不会变化。但是vendor.js会变化,不过vendor.js比较小,所以相对来说不是太影响,并且vendor.js包含的内容只是打包相关的内容,内容比较少,且直接删除都不影响。当然提取公共模块的时候也可以设置一些策略,例如minChunks、chunks等配置,具体我就不展开讲了。

css预处理
css预处理,可以说是前端自己动手写css必备的工具了,可以省去我们很多功夫。配置也比较简单,有几种方式可以配置,我这里就将两种比较简单的:
1、直接在loader里面配置:

{
        test: //.css$/,
        use: ExtraTextWebpackPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('autoprefixer')({
                  browsers:["ie >= 8",
                    "Firefox >= 20",
                    "Android > 4.4"]
                }),
              ]
            }
          }]
        }),
        include: resolve('../src')
      },

第二种,配置一个post.css.config文件
这里要分两步走,第一步现在loader里面配置下:

{
  test://.css$/,
  use:[
    'style-loader','css-loader?importLoaders=1','postcss-loader' 
  ] 
}

第二步,在你放源文件的目录(我这里是src),下面创建一个postcss.config.js文件。里面加上下面的内容:

module.exports = {
    plugins: [
        require('autoprefixer')({ /* ...options */ })
    ]
}

我觉第一种方式比较优雅,第二种方式你要找到源文件目录,不能随便放,也不能配置目录,如果有其他人看你代码,看见这个postcss.config.js简直不明觉厉,一个字,很坑!所以推荐使用第一种方式。

以上就是全部,如果有需要,以后会持续更新,谢谢。

【转自慕课】https://www.imooc.com

Python

python强势来袭-0007-写在编程之前

2022-3-3 16:10:43

Python

从零开始打造 Mock 平台 - 功能模块篇

2022-3-3 16:13:05

搜索