Web前端之路开源工具技巧

Webpack笔记:基础配置与代码分块

2017-04-28  本文已影响227人  瑾逸te

工欲善其事,必先利其器。webpack就是前端开发的一个利器。下面是一些自己学习过程中的笔记,欢迎交流。

在前端开发中,我们为什么需要使用webpack呢,简单总结一下,比较直接的原因有两点:

  1. 代码压缩打包
  2. 开发中的热更新

在现在的前端开发中,我们需要依赖大量的第三方代码库,通过webpack这样的打包工具,我们可以方便的管理各个依赖。而配合webpack-dev-server这样的插件,即使你只是平常做一些前端的练习,也能大大提高你的学习效率。

基础配置

下面是一个快速的配置文件,可以用作日常的前端学习练习时使用(webpack2):

var path = require("path");

module.exports = function() {
  return {
    entry: {
      main: "./src/app.js"
    },
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js"
    },
    module: {
      rules: [
        {
          test: /\.css$|\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.js$/,
          use: [
            {
              loader: "babel-loader",
              options: {
                presets: ["es2015"]
              }
            }
          ]
        }
      ]
    }
  };
};

这个配置包含了两个功能:

现在,来看一下怎么使用这份配置文件,在你的本地文件夹运行:

# 初始化项目并生成package.json文件
npm init
# 新建webpack.config.js文件,再复制配置到文件中,并安装webpack和webpack-dev-server插件和其他用到的加载器:
npm install --save-dev webpack webpack-dev-server css-loader style-loader
npm install --save-dev sass-loader node-sass

接下来,给npm添加命令:

"script": {
  start: "webpack-dev-server --open"
}

现在,在命令行运行

npm run start

成功(此时默认你已经在你的文件夹中建立index.html入口,并且在html中引入了/bundle.js)!
此时,会自动打开浏览器跳转到index.htl

webpack-dev-server的作用?

提供了一个本地的开发server,并且有live reload的功能,也就是,你在编辑器里更改了CSS或者JavaScript之后,浏览器中的网页就自动刷新了。

下面详细解释一下配置文件中各部分代码的作用:

entry:这是你的应用的入口点参数,webpack从这里给的文件开始解析你的代码,你也可以定义多个入口点
output:这是处理后的文件存放的参数。
module:你的代码中需要使用的加载器配置,配置中,test可以使用正则表达来检测文件名,以确定是否使用当前的加载器

完整的配置文件可以参考:https://webpack.js.org/configuration/

使用CommonsChunkPlugin

在代码中,一些引入的第三方代码,如果和自己的代码混合在一起打包,那么每次生成代码,都会生成新的打包文件。为了提高网站的加载速度,我们需要利用浏览器的缓存,一些第三方的代码库不需要每次都生成新的压缩代码,而是缓存在浏览器中,下次使用直接从浏览器加载。为了分离我们自己的代码和第三方的代码,或者一些类似的场景,我们需要使用CommonsChunkPlugin

下面是一个官方的配置文件


entry: {
    main: './index.js' //Notice that we do not have an explicit vendor entry here
},
output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module) {
            // this assumes your vendor imports exist in the node_modules directory
            return module.context && module.context.indexOf('node_modules') !== -1;
        }
    }),
    //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
    new webpack.optimize.CommonsChunkPlugin({ 
        name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
    })
]

在这个文件中,使用了两次CommonsChunkPlugin插件,而entry只有一个main。那么,如果分离特殊的代码呢?

new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function (module) {
            // this assumes your vendor imports exist in the node_modules directory
            return module.context && module.context.indexOf('node_modules') !== -1;
        }
    }),

在这里,minChunks是一个函数,插件通过这个函数来判断当前的chunk是否是符合条件。如果符合条件,就通过这个CommonsChunkPlugin,把当前chunk分离出去,如果不符合条件,那么第二个CommonsChunkPlugin就处理这个chunk。这样,当你的代码变动,由于vender的代码已经分离了,所以变动之后,重新打包,webpack并不会对vender的代码重新打包。

上一篇下一篇

猜你喜欢

热点阅读