基于webpack.config.js 参数详解


Posted in Javascript onMarch 20, 2018

webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块。

var webpack = require('webpack');
module.exports = {
 entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'
 ],
 output: {
  path: './build',
  filename: 'bundle.js'
 },
 module: {
  loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude:  /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
  ]
 },
 resolve:{
  extensions:['','.js','.json']
 },
 plugins: [
  new webpack.NoErrorsPlugin()
 ]
};

1.entry

entry可以是个字符串或数组或者是对象。

当entry是个字符串的时候,用来定义入口文件:

entry: './js/main.js'

当entry是个数组的时候,里面同样包含入口js文件,另外一个参数可以是用来配置webpack提供的一个静态资源服务器,webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化,实时的进行构建,并且自动刷新页面:

entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'

当entry是个对象的时候,我们可以将不同的文件构建成不同的文件,按需使用,比如在我的hello页面中只要\引入hello.js即可:

entry: {
  hello: './js/hello.js',
  form: './js/form.js'
 }

2.output

output参数是个对象,用于定义构建后的文件的输出。其中包含path和filename:

output: {
  path: './build',
  filename: 'bundle.js'
 }

当我们在entry中定义构建多个文件时,filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

3.module

关于模块的加载相关,我们就定义在module.loaders中。这里通过正则表达式去匹配不同后缀的文件名,然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器(!用来定义级联关系):

module: {
 loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
 ]
}

此外,还可以添加用来定义png、jpg这样的图片资源在小于10k时自动处理为base64图片的加载器:

{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}

给css和less还有图片添加了loader之后,我们不仅可以像在node中那样require js文件了,我们还可以require css、less甚至图片文件:

require('./bootstrap.css');
 require('./myapp.less');
 var img = document.createElement('img');
 img.src = require('./glyph.png');

但是需要知道的是,这样require来的文件会内联到 js bundle中。如果我们需要把保留require的写法又想把css文件单独拿出来,可以使用下面提到的[extract-text-webpack-plugin]插件。

在上面示例代码中配置的第一个loaders我们可以看到一个叫做react-hot的加载器。我的项目是用来学习react写相关代码的,所以配置了一个react-hot加载器,通过它,可以实现对react组件的热替换。我们已经在entry参数中配置了webpack/hot/only-dev-server,所以我们只要在启动webpack开发服务器时开启?hot参数,就可以使用react-hot-loader了。在package.json文件中这样定义:

"scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors"
 }

4.resolve

webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:

resolve:{
  extensions:['','.js','.json']
 }

然后我们想要加载一个js文件时,只要require(‘common')就可以加载common.js文件了。

6.externals

当我们想在项目中require一些其他的类库或者API,而又不想让这些类库的源码被构建到运行时文件中,这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题:

externals: {
  "jquery": "jQuery"
 }

这样我们就可以放心的在项目中使用这些API了:var jQuery = require(“jquery”);

7.context

当我们在require一个模块的时候,如果在require中包含变量,像这样:

require("./mods/" + name + ".js");

那么在编译的时候我们是不能知道具体的模块的。但这个时候,webpack也会为我们做些分析工作:

1.分析目录:'./mods';

2.提取正则表达式:'/^.*.js$/';

于是这个时候为了更好地配合wenpack进行编译,我们可以给它指明路径,像在cake-webpack-config中所做的那样(我们在这里先忽略abcoption的作用):

var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context : 
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

以上这篇基于webpack.config.js 参数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
小程序实现单选多选功能
Nov 04 Javascript
js实现简单放大镜效果
Mar 07 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
JavaScript生成指定范围的时间列表
Mar 19 #Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 #Javascript
angularjs 缓存的使用详解
Mar 19 #Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 #Javascript
react-native-video实现视频全屏播放的方法
Mar 19 #Javascript
vue实现树形菜单效果
Mar 19 #Javascript
VUE重点问题总结
Mar 19 #Javascript
You might like
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php获取远程文件内容的函数
2015/11/02 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
JS实现商品橱窗特效
2020/01/09 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python实现多线程采集的2个代码例子
2014/07/07 Python
Python计算一个文件里字数的方法
2015/06/15 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
详解python数据结构和算法
2019/04/18 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
爱心活动计划书
2014/04/26 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
建房合同协议书
2016/03/21 职场文书