webpack分享

2018-07-30  本文已影响0人  菜鸟的旅行日记

webpack分享

基本概念

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

模块

webpack 模块

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

核心概念

总结

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,
}
上一篇下一篇

猜你喜欢

热点阅读