基于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中"/"运算符常见错误
Oct 13 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
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把session写入数据库示例
2014/02/26 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python表格存取的方法
2018/03/07 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
JAVA和C++的区别
2013/10/06 面试题
优秀大学生的自我评价
2014/01/16 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
跳高加油稿
2015/07/21 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android