webpack基础配置
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导出,常用有如下配置
- entry:{}
- output:{}
- module:{}
- resolve:{}
- 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
- 加载器需要单独下载,'-loader'可以省略不写,这个命名规则和搜索优先级顺序在 webpack 的 resolveLoader.moduleTemplates api 中定义。
Default: ["-webpack-loader", "-web-loader", "-loader", ""] - 多个加载器处理同一类型文件用'!'连接
- loader的配置信息的参数写到'?'后面
- 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基础配置的更多相关文章
- 搭建webpack基础配置
搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...
- 2、webpack基础配置
我们需要安装webpack 还需要安装webpack cli 这两个都是我们的开发依赖 这里我们一般会加一个-D表示上线的时候不需要他们两个包 安装我们的webpack 先初始化一下,记住我们的安装依 ...
- webpack基础配置(一)
第一次写博客,有点小小的兴奋,也有一点点的慌张--- 我是一个小白,仅记录自己的学习过程,内容仅供参考,如果有问题的地方,还希望各位大牛多多指教,我菜,菜是原罪,但是我可以学-- 1.最基本的:如何使 ...
- webpack(11)配置文件分离为开发配置、生成配置和基础配置
前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...
- webpack4基础入门操作(二)(讲解下webpack的配置内容)
前序:我之所以开始写这个系列,是因为我最近出去看了下外面的情况,发现技术更新的脚步太快了.我的技术栈已经完全落伍了. 所以准备今年学习写新的东西,而React.webPack4就是我的第一步.前面我看 ...
- webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...
- 深入浅出 webpack 之基础配置篇
前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...
- webpack中Entry与Output的基础配置
entry顾名思义,就是打包的入口文件 module.exports = { // 这个文件要做打包,从哪一个文件开始打包 entry: './src/index.js', // 打包文件要放到哪里去 ...
- react+webpack基础学习配置
最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...
随机推荐
- 文件存储结构inode与RAM结构建立联系
linux下一切皆文件,大致可分为以下几类:目录.普通文件.硬连接.软连接.字符设备.块设备.FIFO.Socket,其在物理存储体内存储按inode和数据块存储,inode代表元数据,是除实际数据外 ...
- abp的权限与导航菜单的关系
原来以为各是各的,所以就有了第一个版本.Getallmentus.然后注入了role,当然失败了.获取所有的菜单.一直在思考在什么地方设置菜单是否展示呢? 后面看了源码.才发现自己错了. UserNa ...
- Python常见经典 python中if __name__ == '__main__': 的解析
当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...
- win10实现移动热点共享WIFI
电脑有线上网有WIFI网卡,想共享WIFI给手机还在为下载猎豹WIFI.360WIFI.WIFI共享精灵?担心密码泄露?担心网络安全?现在一切都不用烦恼.windows10系统自带热点共享 工具/原料 ...
- Div+CSS布局入门教程
http://www.blueidea.com/tech/site/2006/3574.asp ———————————————————————————————————————————————————— ...
- Hook length formula 学习笔记 UVALive 6625
最近做到一个关于杨氏矩阵的题目. UVALive 6625 题目大意是用n以内的数填充杨氏矩阵,要求行严格递增,列不严格递增. 求方案数. 数据范围很小,我直接上爆搜,结果TLE了. 后来发现一位学长 ...
- window7电脑git设置快捷命令
平常git开发的一些命令来回重复的敲,有点麻烦,这里给git的常用的命令设置了快捷键,很方便开发. 我这个是window7环境,下面开始 1.home键 + r 打开运行窗口,点击确定进入黑窗口 2. ...
- 使用shell脚本守护node进程
现在开源的守护node进程的包有不少,比如forever,pm2,这里我就不再赘述了. 但是有的公司生产服务器是不能联网的,而这些包都需要全局安装,必须要网络环境.难道你nohup node app. ...
- Yii GridView::widget
GridView::widget文档 http://demos.krajee.com/grid GridView::widget([ 'dataProvider' => $dataProvide ...
- windows cmd 命令
dir 查看文件,参数:/Q显示文件及目录属系统哪个用户,/T:C显示文件创建时间,/T:A显示文件上次被访问时间,/T:W上次被修改时间 set 显示当前所有的环境变量 find 文件名 查找某文件 ...