学习webpack(三)

webpack.config

Webpack在执行的时候,除了可以在命令行传入参数以外,还可以通过指定的配置文件去执行,默认情况下,会搜索当前目录下的 webpack.config.js 文件,这个文件是一 个node.js 模块,返回一个 json 格式的配置信息对象,或者通过命令行:webpack --config选项来指定配置文件。

新建一个webpack.config.js文件:

    var Webpack = require("webpack");
module.exports = {
    entry: ["./entry.js"],
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }]
    }
}

现在我们仅仅需要运行:webpack 就ok了。

now let's do some changes in css file:

#app{
    color: lightblue;
}

在命令行敲:webpack.

Refresh your browser and see the changes in the document.

具体参数

  • ==entry==:指入口文件的配置项,它是一个数组的原因是webpack允许多个入口点。 当然如果你只有一个入口的话,也可以直接使用双引号"./entry.js"
  • ==output==:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称
  • ==module==:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,226评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,710评论 7 110
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,496评论 2 71
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • 我记得在自己没入伍之前,在我那小山村和田野一带麻雀是很多的。 小时候很喜欢打鸟,书包里最少有两把弹...
    翔遠阅读 566评论 0 7