webpack分享

基本概念

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

模块

• 在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。
• 每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
• Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。在 web 存在多种支持 JavaScript 模块化的工具，这些工具各有优势和限制。webpack 基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。

webpack 模块

对比 Node.js 模块，webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：

• ES2015 import 语句
• CommonJS require() 语句
• AMD define 和 require 语句
• css/sass/less 文件中的 @import 语句
• 样式(url(...))或 HTML 文件img标签中的图片链接(image url)

核心概念

• 入口(entry)
• 输出(output)
• loader
  为什么需要loader? 因为webpack自身只处理JavaScript，不是js的东西需要先经过loader转换成js
• 插件(plugins)
  loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
  常用的插件列表:
  1. webpack.optimize.CommonsChunkPlugin
     通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。
  2. extract-text-webpack-plugin
     它会将所有的 入口chunk (entry chunks) 中的 require("style.css") 移动到分开的 css 文件。因此，你的样式不再内联到 javascript 里面，但会放到一个单独的 css 包文件 (styles.css)当中。 如果你的样式文件大小较大，这会更快，因为样式文件会跟 javascript 包并行加载。
  3. html-webpack-plugin
     生成一个html文件
  4. webpack.HotModuleReplacementPlugin
     模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。
  5. open-browser-webpack-plugin
     自动打开网页
  6. webpack.DefinePlugin
     允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用
  7. webpack.optimize.UglifyJsPlugin
     压缩代码
  8. zip-webpack-plugin
     生成压缩文件

总结

Webpack在启动后会从Entry里配置的Module开始，递归解析Entry依赖的所有Module。每找到一个Module，就会根据Loader去找出对应的转换规则，对Module进行转换后，再解析出当前Module依赖的Module。这些模块会以Entry为单位进行分组，一个Entry以及其所有依赖的Module被分到一个组也就是一个Chunk。最后，Webpack会将所有的Chunk转换成文件输出，在整个流程中，Webpack会在恰当的时机执行Plugin里的逻辑。

entry

entry可以是 string, array, object

entry: './app/entry'

entry: ['./app/entry1', './app/entry2']

entry: {
    entry1: './app/entry1',
    entry2: './app/entry2',
}

生成的chunk名称：string和array，生成的Chunk的名称为main.js，object为键值对中的键名。

output

output: {
    //输出文件名称，如果有多个entry时可以根据内置的变量去动态生成，例如 '[name].js'，提供的变量有id(chunk的唯一标识，从0开始)，name(chunk的名称)，hash(chunk的唯一标识的Hash值)，chunkhash(chunk内容的Hash值)，hash和chunkhash可以指定长度，例如[hash:8]代表8位Hash值，ExtractTextWebpackPlugin使用contenthash而不是chunkhash来代表Hash值，原因是因为，该插件提取出的内容是代码本身，并不是由一组模块组成的chunk。
    filename: '[name]-[hash]-bundle.js',

    //配置输出文件存放在本地的目录，必须为string的绝对路径，一般使用node的path模块
    path: path.resolve(__dirname, 'dist'),

    //配置发布到线上的资源URL前缀
    publicPath: 'https://cdn.example.com/assets/',
}

module

module: {

    //配置模块读取和解析规则，类型为数组
    rules: [{
        //匹配规则
        test: /\.(js|jsx)$/,
        //指定包含的目录
        include: path.resolve(__dirname, 'src'),
        //指定排除的目录
        exclude: path.resolve(__dirname, 'node_modules'),
        use: ['babel-loader'],
        //重置顺序，pre放置最前，post放置最后
        enfore: 'pre', 
    }],

    //让webpack忽略没有采用模块化的文件递归解析，（主要针对一些本身庞大但又没有采用模块化的库，例如jQuery、ChartJS)，支持正则表达式和函数
    noParse: /jquery|chartjs/,

    //parse可以指定哪些模块的语法被解析，哪些不被解析，可以精确到语法层面，并非文件层面（区别于noParse）
    parse: {
        amd: false, //禁用AMD
        commonjs: false, //禁用commonjs
    },

    //webpack在启动后会从入口模块出发找到所有依赖模块，我们可以根据需要修改修改匹配规则
    resolve: {
        //别名
        alias: {
            mobx: `${__dirname}/node_module/mobx`
        },

        //有的第三方模块会针对不同的环境提供几份代码，一般会放在package,json下，webpack会根据mainFields的配置去决定优先采用哪部分的代码。
        mainFields: ['browser', 'main'],

        //在导入语句没有添加后缀名时，会根据配置尝试添加后缀名查找文件，默认配置如下，例如require('./data')，会先去查找data.js找不到，再去找data.json
        extensions:  ['.js', '.json'],

        //modules 配置webpack去哪些目录下寻找第三方模块，默认只会去node_modules模块下查找，也可以支持扩展
        modules: ['./src/components', 'node_modules'],

        //配置为true时，所有的导入语句都必须添加后缀。
        enforceExtension: true,

        //配置node_modules下的导入语句是否需要添加后缀，一般配合enforceExtension使用，因为很多第三方模块导入语句不会添加后缀，为了避免错误，在enforceExtension设为true时，需要将enforceModuleExtension设为false
        enforceModuleExtension: false,
    }
}

plugin

plugin用于扩展Webpack的功能，数组中的每一项都是一个要使用的plugin的实例，几乎所有webpack无法直接实现的所有功能都可以在社区中找到plugin去解决。

plugin: [{
    new Plugin({
        //插件配置项
    })
}]

devServer

devServer: {
    //启用模块热替换功能，配合插件 new webpack.HotModuleReplacementPlugin()使用,
    hot: true,

    //DevServer的实时预览功能依赖一个注入页面里的代理客户端，inline用于配置是否将这个代理客户端自动注入将运行在页面的Chunk里，默认自动注入。开启inline，devserver会在构建变化后的代码时通过代理客户端控制页面刷新。如果不开启，会以iframe的方式去运行要开发的网页，构建完变化的代码时，会通过刷新iframe来实现实时预览
    inline: true, 

    //指定访问请求返回的文件
    historyApiFallback: {
        rewrites: [{
            from: /^\/user/,    
            to: '/user.html'
        }]
    },

    proxy: {
        '/h5/*': {
            target: 'http://localhost:7601',
            pathRewrite: function (path) {
                return path.replace('/h5/api', '/h5'); 
            }
        },
    },

    //在http响应中注入响应头
    header: {
        'X-foo': 'bar'
    },

    //配置devserver服务监听的地址，默认本地，如果想要局域网内的其他设备访问，可以将host配置为 0.0.0.0
    host: '127.0.0.1',
    port: '8080',

    //配置是否关闭DNS绑定后的http请求的Host检查，一般配合host:0.0.0.0使用，可以让其他设备通过ip地址访问。
    disableHostCheck: false,

    //使用https协议，devserver会自动生成一份https证书
    https: true,

    //配置控制台输出的日志等('none', 'error', 'warning', 'info')
    clientLogLevel: 'error',

    //配置是否启用Gzip压缩，默认不启用
    compress: true,

    //构建完毕使用默认浏览器自动打开网页
    open: true,
}