基于webpack.config.js 参数详解
作者:zaichuanguanshui 发布时间:2024-05-02 16:28:30
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);
来源:http://blog.csdn.net/zaichuanguanshui/article/details/53610694
猜你喜欢
- 本文实例讲述了python中while循环语句用法。分享给大家供大家参考。具体如下:number = 1while number <
- 最近项目中使用了vue-router的addRoutes这个api,遇到了一个小坑,记录总结一下。场景复现:做前端开发的同学,大多都遇到过这
- 解决办法: 1.新建一个同名的数据库(数据文件与原来的要一致) 2.再停掉sql server(注意不要分离数据库) 3.用原数据库的数据文
- 一、find_in_set() 函数详解示例:select FIND_IN_SET('1', '1,2,3'
- 阅读:Mootools常用方法扩展(三) 继续Mootools常用方法扩展,这次是Window类上的扩展,也就是全局函数。方法:$param
- 模型事件Laravel 模型事件允许你监听模型生命周期内的事件, 并且通过这个事件去做一些模型通用性的东西, 例如检查用户修改了那个字段,
- php实现记住密码自动登录方法不止一个,下面出现有二个emptyempty,其实是一个,那是因为代码高亮有bug。希望对大家有帮助。 一,用
- 引言算法思路假设我们有这样一个生物族群,他们的每个基因片段都是一个个三角形(即只含三个点和颜色信息),他们每个个体表现出的性状就是若干个三角
- 这篇文章主要介绍了Python tkinter常用操作代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- WaitGroup的用途:它能够一直等到所有的goroutine执行完成,并且阻塞主线程的执行,直到所有的goroutine执行完成。官方对
- Python pip安装lxml出错的问题解决办法1. 在使用pip安装lxml过程中出现了一下错误: &
- 读取数据(Reading data)TensorFlow输入数据的方式有四种:tf.data API:可以很容易的构建一个复杂的输入通道(p
- 函数带括号和不带括号的区别1、不带括号时,调用的是这个函数本身 ,是整个函数体,是一个函数对象,不需等该函数执行完成2、带括号(此
- CSS浮动一直是个比较让人郁闷的问题,很多的布局问题都出在浮动上,特别是当浮动的列数很多时,但其实只要理解了两列结构的浮动,面对多列数的浮动
- 在之前只知道SqlServer支持数据批量插入,殊不知道Oracle、SQLite和MySql也是支持的,不过Oracle需要使用Orace
- 目录前言1、字符串模板的参数2、格式控制符3、格式化操作符辅助符总结前言Python的%操作符可用于格式化字符串,控制字符串的呈现格式。使用
- 在迁移学习finetune时我们通常需要冻结前几层的参数不参与训练,在Pytorch中的实现如下:class Model(nn.Module
- 目录1、股票数据2、数据处理3、绘制K线4、去除图中非交易日5、在K线图中,添加成交量K线图简介:K线图又被成为“蜡烛图”、“阴阳线”等,它
- Pyqt5安装并配置到pycharm方法:教你如何用pycharm安装pyqt5及其相关配置一、简介QLabel是界面中的标签类,继承自QF
- 知识点简单的装饰器带有参数的装饰器带有自定义参数的装饰器类装饰器装饰器嵌套@functools.wrap装饰器使用基础使用简单的装饰器def