javascript模块打包工具-webpack

概述

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

使用webpack也是在最近加载第三方统计图-fusioncharts时候的事,由于fusioncharts的js文件太大,手册中有模块化加载的方法,所以才研究起来webpack,同时前面为了解决一些es6语法的问题,也用到了babel解释器,正好一起做了处理.

常用操作

编译css/scss

  1. 安装loader插件
npm i css-loader sass-loader style-loader node-sass

之前没有安装node-sass会报错this.getOptions错误,有文章说是sass-loader版本太高,降级后提示缺少node-sass模块。之后所有模块使用最新版,不存在问题,所以本质还是缺少node-sass模块的原因。

  1. 配置webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, 
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'], 
            }
        ]
    }
};

常用链接

[1] 中文手册
[2] 打包css

总结

webpack的概念相当惊艳,配合babel可以忽略很多平台和标准缺陷的坑,真的做到跟上时代潮流.缺点还是在于配置不容易理解.