webpack运行规则:

Webpack 会给每个模块分配一个唯一的id并通过这个id索引和访问模块。在页面启动时,会先执行入口文件中的代码,其它模块会在运行 require 的时候再执行。

运行时主要的参数

webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包,默认读取文件webpack.config.js

webpack --watch //监听变动并自动打包

webpack -p //压缩混淆脚本

webpack -d //生成map映射文件,告知哪些模块被最终打包到哪里了

webpack --display-error-details 打印错误详情。

还有一些看性能的参数:

webpack --colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤

webpack --profile 输出性能数据,可以看到每一步的耗时

webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块

webpack entry.js bundle.js 编译 entry.js 并打包到 bundle.js

配置文件

整个配置文件就是一个大的json,这个json需要用module.exports导出,常用有如下配置

  1. entry:{}
  2. output:{}
  3. module:{}
  4. resolve:{}
  5. plugins:[]

1. entry

值可以为String,[String],Object

    {
entry1: "./page1",
entry2: ["./page2", "./page3"]
}

value为数组形式时,将加载数组中的所有模块,但以最后一个模块作为输出

2. output

{
path: './build', //决定文件在磁盘中的位置,最好是绝对路径
filename: 'bundle.js'// 每个文件自己唯一的名字
//最后打包出来的文件位置: ./build/bundle.js
publicPath: 'http://mycdn.com/', // 用来生成URL
chunkFilename:'',//非入口块的文件名
sourceMapFilename:'',//SourceMaps的文件名,默认值是 `[file].map`
library:'',//单独打包自己写的某个库,值为引用时需要的模块名
libraryTarget:'',//规定库输出的格式,这两个参数一般在生成工具的配置文件中,不在项目打包文件中
}

filename可用变量:[name],[hash],[chunkhash]

chunkFilename可用变量:[id],[name],[hash],[chunkhash]

sourceMapFilename可用变量:[file],[id],[hash]

libraryTarget可选值:'var'(default),'this','commentjs','commentjs2','amd','umd'

3. module

loaders:[]

{
test: 需要匹配的文件类型,用正则,
loader: 需要使用的加载器,
enclude:''/[],
include:''/[],
loader: 用!分割加载器,
loaders: 一个加载器的数组
},

和loaders相似的两个参数:module.preLoaders, module.postLoaders,区别只在于时机不同

loader和loaders

  1. 加载器需要单独下载,'-loader'可以省略不写,这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义。

    Default: ["-webpack-loader", "-web-loader", "-loader", ""]
  2. 多个加载器处理同一类型文件用'!'连接
  3. loader的配置信息的参数写到'?'后面
  4. loader添加方法:
    • 在 webpack 全局配置中进行绑定,写在配置文件中
    • 引用模块的时候添加,如:require("!style!css!./style.css")
    • 通过命令行的方式使用。比如webpack entry.js bundle.js --module-bind 'css=style!css'

      Loader 可以同步或异步执行。

noParse

值为正则或正则数组

内容为不需用loader解析的东西

4. plugins

包括系统插件和扩展插件

CommonsChunkPlugin

作用:用于提取多个入口文件的公共脚本部分

    entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3",
ap1: "./admin/page1",
ap2: "./admin/page2"
},
output: {
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
]
script--- required:
page1.html: commons.js, p1.js
page2.html: commons.js, p2.js
page3.html: p3.js
admin-page1.html: commons.js, admin-commons.js, ap1.js
admin-page2.html: commons.js, admin-commons.js, ap2.js

5. externals

不希望webpack把这个库打包进代码,一般配合libraryTarget使用

值可以为json, 字符串, 函数, 正则, 数组

    externals: {
"react": "React",
}
//对应于const React=require('react');

6.resolve

Webpack 的配置提供了 resolve 和 resolveLoader 参数来设置模块解析的处理细节,resolve 用来配置应用层的模块(要被打包的模块)解析,resolveLoader 用来配置 loader 模块的解析。

    {
//查找module的话从这里开始查找
root: 'E:/github/flux-example/src', //绝对路径
//自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名,注意一下, 第一个是空字符串! 对应不需要后缀的情况.
extensions: ['', '.js', '.json', '.scss'],
//模块别名定义,方便后续直接引用别名,无须多写长长的地址,也可以省下不少搜索硬盘的时间。
alias: {
AppAction : 'js/actions/AppAction.js'
}
//后续直接require('AppAction') 即可
}

高级使用:shimming

推荐参考:shimming:https://github.com/webpack/docs/wiki/shimming-modules

在 AMD/CMD 中,我们需要对不符合规范的模块(比如一些直接返回全局变量的插件)进行 shim 处理,这时候我们需要使用 exports-loader 来帮忙:

{ test: require.resolve("./src/js/tool/swipe.js"), loader: "exports?swipe"}

之后在脚本中需要引用该模块的时候,这么简单地来使用就可以了:

require('./tool/swipe.js');

swipe();

使用 script.js 在脚本中来加载我们的模块:

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});

webpack基础配置的更多相关文章

  1. 搭建webpack基础配置

    搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...

  2. 2、webpack基础配置

    我们需要安装webpack 还需要安装webpack cli 这两个都是我们的开发依赖 这里我们一般会加一个-D表示上线的时候不需要他们两个包 安装我们的webpack 先初始化一下,记住我们的安装依 ...

  3. webpack基础配置(一)

    第一次写博客,有点小小的兴奋,也有一点点的慌张--- 我是一个小白,仅记录自己的学习过程,内容仅供参考,如果有问题的地方,还希望各位大牛多多指教,我菜,菜是原罪,但是我可以学-- 1.最基本的:如何使 ...

  4. webpack(11)配置文件分离为开发配置、生成配置和基础配置

    前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...

  5. webpack4基础入门操作(二)(讲解下webpack的配置内容)

    前序:我之所以开始写这个系列,是因为我最近出去看了下外面的情况,发现技术更新的脚步太快了.我的技术栈已经完全落伍了. 所以准备今年学习写新的东西,而React.webPack4就是我的第一步.前面我看 ...

  6. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  7. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  8. webpack中Entry与Output的基础配置

    entry顾名思义,就是打包的入口文件 module.exports = { // 这个文件要做打包,从哪一个文件开始打包 entry: './src/index.js', // 打包文件要放到哪里去 ...

  9. react+webpack基础学习配置

    最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...

随机推荐

  1. 文件存储结构inode与RAM结构建立联系

    linux下一切皆文件,大致可分为以下几类:目录.普通文件.硬连接.软连接.字符设备.块设备.FIFO.Socket,其在物理存储体内存储按inode和数据块存储,inode代表元数据,是除实际数据外 ...

  2. abp的权限与导航菜单的关系

    原来以为各是各的,所以就有了第一个版本.Getallmentus.然后注入了role,当然失败了.获取所有的菜单.一直在思考在什么地方设置菜单是否展示呢? 后面看了源码.才发现自己错了. UserNa ...

  3. Python常见经典 python中if __name__ == '__main__': 的解析

    当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...

  4. win10实现移动热点共享WIFI

    电脑有线上网有WIFI网卡,想共享WIFI给手机还在为下载猎豹WIFI.360WIFI.WIFI共享精灵?担心密码泄露?担心网络安全?现在一切都不用烦恼.windows10系统自带热点共享 工具/原料 ...

  5. Div+CSS布局入门教程

    http://www.blueidea.com/tech/site/2006/3574.asp ———————————————————————————————————————————————————— ...

  6. Hook length formula 学习笔记 UVALive 6625

    最近做到一个关于杨氏矩阵的题目. UVALive 6625 题目大意是用n以内的数填充杨氏矩阵,要求行严格递增,列不严格递增. 求方案数. 数据范围很小,我直接上爆搜,结果TLE了. 后来发现一位学长 ...

  7. window7电脑git设置快捷命令

    平常git开发的一些命令来回重复的敲,有点麻烦,这里给git的常用的命令设置了快捷键,很方便开发. 我这个是window7环境,下面开始 1.home键 + r 打开运行窗口,点击确定进入黑窗口 2. ...

  8. 使用shell脚本守护node进程

    现在开源的守护node进程的包有不少,比如forever,pm2,这里我就不再赘述了. 但是有的公司生产服务器是不能联网的,而这些包都需要全局安装,必须要网络环境.难道你nohup node app. ...

  9. Yii GridView::widget

    GridView::widget文档 http://demos.krajee.com/grid GridView::widget([ 'dataProvider' => $dataProvide ...

  10. windows cmd 命令

    dir 查看文件,参数:/Q显示文件及目录属系统哪个用户,/T:C显示文件创建时间,/T:A显示文件上次被访问时间,/T:W上次被修改时间 set 显示当前所有的环境变量 find 文件名 查找某文件 ...