美文网首页
webpack默认配置文件

webpack默认配置文件

作者: zhangmingbo | 来源:发表于2019-10-03 15:14 被阅读0次

    单文件打包的命令

    npx webpack index.js
    

    但是当我们在项目文件夹中将所有文件一起打包该怎么处理呢?


    项目文件目录

    我们在项目中执行npx webpack index.js打包出一个dist文件里有一个maiin.js完全ok,这时我们思考为什么回打包出一个dist文件?
    这是因为webpack团队为了我们使用方便给了我们一个默认的配置文件,默认输出的文件夹为dist文件夹。但是当我们项目整体打包时,webpack不知道我们的那个文件为入口文件,自然也就打不成包了。

    自定义webpack配置文件webpack.config.js

    webpack官网给我们指出webpack有四个核心概念即入口(entry),输出(output),loader,插件(plugins)。


    image.png

    这里我们先讲前两个核心概念入口和输出,了解他们如何在配置文件中配置。

    const path = require('path');
    module.exports = {
      entry: './index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'bundle')
      }
    }
    

    entry

    入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
    理解:webpack以那个文件为起始文件

    output

    output 属性告诉 webpack 在哪里输出它所创建的 bundles(我们修改为bundle.js),以及如何命名这些文件,默认值为 ./dist(如上我们修改为了bundle文件夹)。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程

    注意:

    使用path时需要引入一个node的核心模块‘path’,调用核心模块‘path’的resolve方法,传入变量__dirname(此变量指此配置文件所在目录),然后将此目录和bundle文件夹结合,即使用path.resolve(__dirname, 'bundle')来指定输出的文件夹。

    如果我们不想以webpack.config.js为默认配置文怎么办?

    比如我们将webpack.config.js文件修改为webpackconfig.js文件如何打包
    此时我们只需要在打包的命令指定配置文件即可

    npx webpack --config webpackconfig.js
    

    如图,即可完成打包


    指定配置文件打包

    相关文章

      网友评论

          本文标题:webpack默认配置文件

          本文链接:https://www.haomeiwen.com/subject/oxmdpctx.html