webpack常用配置项配置文件介绍


Posted in Javascript onNovember 07, 2016

一.webpack基础

1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息。(也可以不生成package.json文件,但是package.json是很有用的,所有建议生成)

2.安装webpaack

a.在全局中安装webpack:npm install webpack -g

b.将webpack安装到项目并将webpack写入package.json的devDependencies中:进入项目根目录,然后在命令行中输入npm install webpack --save-dev。

3.打包模块

webpack <entry> <output>。

<entry>用于指定打包的文件, <output>用于指定打包后的文件。

webpack app/index.js

build/build.js表示将app文件夹中的index.js打包到build文件夹中的build.js中。

二.webpack配置文件常用配置项介绍

1.webpack有一个默认的配置文件webpack.config.js,这个文件需要手动的创建,位于项目根目录中。可以为一个项目设置多个配置文件,已达到不同的配置文件完成不同的功能。怎么设置后面介绍。

2.webpack的配置文件会暴露出一个对象,格式如下:

module.exports = {



//配置项


}

3.常用配置项将要说明

entry:打包的入口文件,一个字符串或者一个对象
output:配置打包的结果,一个对象
fileName:定义输出文件名,一个字符串
path:定义输出文件路径,一个字符串
module:定义对模块的处理逻辑,一个对象
loaders:定义一系列的加载器,一个数组
[
 {
test:正则表达式,用于匹配到的文件
loader/loaders:字符串或者数组,处理匹配到的文件。如果只需要用到一个模块加载器则使用

 loader:string,如果要使用多个模块加载器,则使用loaders:array

include:字符串或者数组,指包含的文件夹
exclude:字符串或者数组,指排除的文件夹
    }
]
resolve:影响对模块的解析,一个对象
extensions:自动补全识别后缀,是一个数组

plugins:定义插件,一个数组

4.entry详细说明

(1)当entry是一个字符串时,这个字符串表示需要打包的模块的路径,如果只有一个要打包的模块,可以使用这种形式

(2)当entry是一个对象

 a.是数组时,当需要将多个模块打包成一个模块,可以使用这个方式。如果这些模块之间不存在依赖,数组中值的顺序没有要求,如果存在依赖,则要将依赖性最高的模块放在最后面。

 例如:entry:["./app/one.js",".app/two.js"]

 b.是键值对形式的对象是,当需要分别打包成多个模块时,可以使用这种方式,例如;

entry:{



module1:"./app/one.js",




module2:["./app/two.js","./app/three.js"]



}

注:当entry是一个键值对形式的对象时,包名就是键名,output的filename不能是一个固定的值,因为每个包的名字不能一样

5.output详细说明

(1)output是一个对象

(2)output.filename:指定输出文件名,一个字符串。当输出一个文件,output.filename为一个确定的字符串
如:

output:{
filename:"build.js"
 }

当输出多个文件,output.filename不能为一个确定的字符串。为了让每个文件有一个唯一的名字,需要用到下面的变量

[name] is replaced by the name of the chunk.对应entry的键名

[hash] is replaced by the hash of the compilation.

[chunkhash] is replaced by the hash of the chunk.

如:

output:{





path:'./build/',






fialname:'[name].js'

}

(3)output.path:指定输出文件的路径,相对路径,一个字符串

(4)output中还有其他的一些值,不在这里说明,可以在webpack的官方网站中获得更多的详细信息

6.module.loaders详细说明

(1)module是一个对象,定义对模块的处理逻辑

(2)module.loaders是一个数组,定义一系列加载器,这个数组中的每一项都是一个对象

(3)module.loaders:[

{

test:正则,用于匹配要处理的文件

loader/loaders: 字符串或者数组, 如果只需要用到一个模块加载器 ,则使用loader:string,

如果要使用多个模块加载器,则使用loaders:array

include:字符串或者数组,指包含的文件夹

exclude:字符串或者数组,指排除的文件夹

}

]

(4)module除了可以配置loaders以外还能配置其他的值,在webpack的官网中获得更多的信息

7.resolve.extensions详细说明

(1)resolve.extensions并不是必须配置的,当不配置时,会使用默认值["", ".webpack.js", ".web.js", ".js"],当手动为resolve.extensions设置值,它的默认值会被覆盖

(2)如果你想要每个模块都能够按照它们自己扩展名正确的被解析,要在数组中添加一个空字符串。

(3)如果你想请求一个js文件但是在请求时不带扩展(如:require('somecode')),那么就需要将'.js'添加到数组中。其他文件一样

(4)resolve还有其他的配置项,在webpack的官网获得更多信息

8.补充

(1)当设置了配置文件后,在命令行中输入webpack就可按照默认配置文件中的配置项打包模块了。

(2)设置多个webpack配置文件。webpack默认的配置文件是webpack.config.js,当在命令行中输入webpack时默认找的是

webpack.config.js。通过在package.json的scripts中添加例如"start-html":"webpack --config webpack.html.config.js"在命令行中输入npm run start-html查找的就是webpack.html.config.js,通过这种方式可以实现不同的配置文件有不同的用处,这样就不用反复修改同一个配置文件

9.下面是一个简单的配置文件

module.exports = {
 entry:{
 one:"./app/one.js",
 two:"./app/two.js"
 },
 output:{
 path:"./build/",
 filename:"[name].js"
 },
 module:{
 loaders:[
 {
 test:/.*\.css$/,
 loaders:["style","css"],
 exclude:'./node_modules/'
 }
 ]
 },
 resolve:{
 extensions:['','.css','.js','jsx']
 }
};

三.webpack-dev-server

1.webpack-dev-server是一个轻量级的服务器,修改文件源码后,自动刷新页面将修改同步到页面上

2.安装webpack-dev-server:

全局安装:npm install webpack-dev-server -g

在项目中安装并将依赖写在package.json文件中:npm install webpack-dev-server --save-dev

3.使用命令webpack-dev-server --hot --inline完成自动刷新

4.默认的端口号是8080,如果需要8080端口被占用,就需要改端口,webpack-dev-server --port 3000(将端口号改为3000)

5.安装webpack-dev-server后就可以在命令行中输入webpack-dev-server开启服务,然后在浏览器地址栏中输入localhost:端口号,就可以在浏览器中打开项目根目录的index.html文件,如果项目根目录中没有index.html文件,就会在浏览器中列出项目根目录中的所有的文件夹。

6.第五条只是启动服务并不能自动刷新,要自动刷新需要用到webpack-dev-server --hot --inline

7.当使用webpack-dev-server --hot --inline命令时,在每次修改文件,是将文件打包保存在内存中并没有写在磁盘里(默认是根据webpack.config.js打包文件,通过--config xxxx.js修改),这种打包得到的文件和项目根目录中的index.html位于同一级(但是你看不到,因为它在内存中并没有在磁盘里)。使用webpack命令将打包后的文件保存在磁盘中

例如在index.html文件中引入通过webpack-dev-server --hot --inline打包的build.js

  <script src="build.js"></script>

在index.html文件中引入通过webpack命令打包的build.js

<script src="./build/build.js"></script>

8.每一次都敲一长串命令太麻烦,在项目根目录的package.json文件的scripts配置中添加配置,如"build":"webpack-dev-server --hot --inline",然后在命令行中输入 npm run build就能代替输入一长串命令(webpack-dev-server --hot --inline),运行webpack-dev-server --hot --inline默认是找 webpack.config.js,通过--config命令可以修改为另一个配置文件。例如:

webpack-dev-server --hot --inline --config

 'webpack.es6.config.js'

9.配置根目录

(1)当在命令行中输入webpack-dev-server --hot --inline,再在浏览器中输入localhost:端口号,浏览器会在项目的根目录中去查找内容,通过--content-base可以配置根目录。

如webpack-dev-server --hot --inline --content-base './build/',在build文件夹中去加载index.html,如果没有index.html文件,将会在浏览器中显示所有build目录下的文件和文件夹

四.例子

我一个设置了两个webpack的配置文件分别是webpack.config.js和webpack.react.config.js。package.json文件中scripts对象的内容如下:

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"react": "webpack --config webpack.react.config.js",

"build": "webpack-dev-server --hot --inline --content-base ./build/",

"build-react": "webpack-dev-server --hot --inline --content-base ./react-build/ --config webpack.react.config.js"


}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的public、private和privileged模式
Dec 28 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 #Javascript
学习JavaScript图片预加载模块
Nov 07 #Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 #Javascript
jquery html5 视频播放控制代码
Nov 06 #Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 #Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 #Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 #Javascript
You might like
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
由浅到深了解JavaScript类
2006/09/08 Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
js实现微信聊天效果
2020/08/09 Javascript
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
python命令 -u参数用法解析
2019/10/24 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
单位委托书
2014/10/15 职场文书
孔子观后感
2015/06/08 职场文书
小学校长开学致辞
2015/07/29 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
用JS写一个发布订阅模式
2021/11/07 Javascript