WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：http://blog.csdn.net/pcaxb/article/details/53466261

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）

WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）http://blog.csdn.net/pcaxb/article/details/53390151详细介绍WebPack的安装-使用-Loader，WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）http://blog.csdn.net/pcaxb/article/details/53393997详细介绍配置-插件-环境-排错，WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）http://blog.csdn.net/pcaxb/article/details/53466261详细介绍WebPack的配置和加载器，涉及到使用过程中的一些细节和技巧，WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）http://blog.csdn.net/pcaxb/article/details/53515234详细介绍WebPack的插件、命令和package的配置， 涉及到Webpack打包性能优化和使用技巧，适合比较了解WebPack的同学学习。

1.配置
webpack默认的配置文件是webpack.config.js,当在命令行中输入webpack时默认找的是webpack.config.js。如果你使用webpack --config webpack.html.config.js,查找的就是webpack.html.config.js文件。通过这种方式可以实现不同的配置文件,这样就可以把开发环境和生产环境分开,不用反复修改同一个配置文件。

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

module.exports = {
　　//配置项
}

(1)entry和output配置

entry 是指入口文件的配置项,它是一个数组或是一个字符串或是一个对象。
output 是指出口文件(打包结果文件)的配置项,它是一个对象。
path － 定义输出文件的路径
filename - 定义输出文件的文件名

单个文件打包为单个输出文件,直接上面的配置就可以,entry:'./app/entry.js'或者entry:['./app/entry.js'],单个输入文件也可以放到一个数组中;多个文件打包为单个输出文件,修改entry:['./app/entry.js','./app/entry1.js']就可以,,entry这里是一个数组可以配置多个输入文件;多个文件打包为多个输出文件,将文件名放入一个键值对,修改entry:{entrykey:'./app/entry.js',entrykey1:'./app/entry1.js'}就可以,这里是一个数组这里是一个对象可以配置多个输入文件。
说明:如果这些模块之间不存在依赖,数组中值的顺序没有要求,如果存在依赖,则要将依赖性最高的模块放在最后面。

单个文件打包为单个输出文件的完整配置(多个文件打包为单个输出文件类似):

entry:['./app/entry.js'],
output:{
    path:'./build',
    filename:'bundle.js'
}

或者(添加全局变量__dirname的情况)

entry:[__dirname+'/app/entry.js'],// 注意在/app/entry.js之前是不要点的
output:{
    path:__dirname+'/build',
    filename:'bundle.js'
}

说明:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录,在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。这里/build之前是不需要点的,如果加了点,就会和根目录的同级目录建一个根目录文件名加点的文件夹,然后里面放了build文件夹和打包出来的文件。

多个文件打包为多个输出文件的完整配置:

entry:{entrykey:'./app/entry.js',entrykey1:'./app/entry1.js'},
output:{
    path:__dirname+'/build',
    filename:'[name].bundle.js'
}

path为定义打包输出文件夹,filename为打包结果文件的名称,如果是单个文件打包为单个输出文件和多个文件打包为单个输出文件2种情况,filename里面直接跟你想输出的文件名。若为多个文件打包为多个输出文件的情况filename里面需写成[name].文件名.js,filename里面的[name]为entry中的键。

(2)module配置
module 是对模块的处理逻辑的配置项,它是一个对象。
loaders － 定义一系列的加载器,它是一个数组,这个数组中的每一项都是一个对象。
loader各个选项的配置说明:
test － 正则,用于匹配要处理的文件。比如要处理jsx文件:test: /\.jsx?$/
loader/loaders － 字符串(loader)或者数组(loaders), 如果只需要用到一个模块加载器 ,则使用loader:'style!css',如果要使用多个模块加载器,则使用loaders: ["style", "css"]
exclude － 字符串或者数组,指屏蔽(不需处理)的文件（文件夹）,比如不需要处理node_modules,则使用
exclude: /node_modules/,如果不需要处理node_modules和bower_components则使用exclude:/(node_modules|bower_components)/,如果你想了解bower_components,可以参考这个链接点击打开链接
include － 字符串或者数组,指包含(必须处理)的文件（文件夹）,同exclude配置类似,不再说明

query：为loaders提供额外的设置选项（可选）,比如配置babel处理es2015和react就使用

query: {
    presets: ['es2015', 'react']
}

(3)resolve配置

resolve 是指对模块解析的配置项,它是一个对象
extensions － 自动补全识别后缀,它是一个数组,并不是必须配置的,当不配置时,会使用默认值["", ".webpack.js", ".web.js", ".js"],当手动为resolve.extensions设置值,它的默认值会被覆盖。如果你想要每个模块都能够按照它们自己扩展名正确的被解析,要在数组中添加一个空字符串。如果你想请求一个js文件但是在请求时不带扩展（如：require('somecode')）,那么就需要将'.js'添加到数组中,其他文件一样。如果不使用默认值,可以参考如下配置:resolve:{ extensions:['','.css','.js','jsx'] }。extensions可以解决大家不知道为什么有的带了js后缀有的没有带js后缀等类似问题。

(4)devserver配置
devserver 配置本地开发服务器webpack-dev-server,devserver具有以下配置选项：
contentBase － 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录。
port － 设置默认监听端口,如果省略,默认为”8080“
inline － 设置为true,当源文件改变时会自动刷新页面
colors － 设置为true,使终端输出的文件为彩色的
historyApiFallback － 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

devServer的完整配置:

devServer: {
    contentBase: "./build",//本地服务器所加载的页面所在的目录
    colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port: 8181//修改默认的端口号为8181
}

说明:使用webpack-dev-server --port 8181命令,也可以修改默认的端口号为8181,devServer整个配置也可以直接通过命令实现。

(5)devtool配置devtool 配置Source Maps(提高调试效率)
开发总是离不开调试,如果可以更加方便的调试当然就能提高开发效率,不过打包后的文件有时候你是不容易找到出错了的地方对应的源代码的位置的,Source Maps就是来帮我们解决这个问题的。通过简单的配置后,Webpack在打包时可以为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试。
devtool配置Source Maps具有以下配置选项：
source-map － 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度。
cheap-module-source-map － 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列（符号）,会对调试造成不便。
eval-source-map － 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项。
cheap-module-eval-source-map － 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点。
说明:上述选项由上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的构建速度的后果就是对打包后的文件的的执行有一定影响。

devtool的完整配置:

module.exports = {
    devtool: 'eval-source-map',//配置生成Source Maps,选择合适的选项
}

(6)watch配置
watch 配置为了不修改一次然后又手动去进行打包一次
当我们在不停的对代码进行变动的时候,为了不修改一次然后又手动去进行打包一次。可以使用webpack的watch功能。

可以直接在webpack.config.js配置代码里面添加watch字段设置为true,配置代码如下:

module.exports = {
  watch: true
}

也可以直接使用命令:

webpack --watch 或者 webpack -w

说明:但是一般情况都是使用webpack的本地开发服务器webpack-dev-server调试和构建本地服务。

(7)plugins配置
plugins 是对插件的配置项,它是一个数组。

2.loader
Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析CSS文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。

(1)css类型的加载器:
css:Css 是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

安装加载器命令:

npm install css-loader style-loader --save-dev

配置加载器:

{
    test:/\.css$/,
    loader:'style!css'
}或者
{
    test:/\.css$/,
    loader:'style-loader!css-loader'
}或者
{
    test: /\.css$/,
    loaders: ["style", "css"]
}

说明：感叹号的作用在于使同一文件能够使用不同类型的loader

sass:Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。
安装加载器命令:

npm install sass-loader node-sass --save-dev

配置加载器:

{
    test:/\.sass$/,
    loader:'style!css!sass'
}或者
{
    test:/\.sass$/,
    loader:'style-loader!css-loader!sass-loader'
}

scss:SCSS 和 Sass  其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点：
文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名。语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似,个人推荐使用SCSS。
安装加载器命令:

npm install sass-loader node-sass --save-dev

因为sass-loader依赖于node-sass,所以还要安装node-sass。当然了,使用样式的话,css-loader和style-loader也是必须的依赖包,如果没有安装,如下命令安装:

npm install css-loader style-loader --save-dev

webpack提供两个工具处理样式表,css-loader 和 style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。通常情况下,css会和js打包到同一个文件中,并不会打包为一个单独的css文件,不过通过合适的配置webpack也可以把css打包为单独的文件的。
配置加载器:

{
    test:/\.scss$/,
    loader:'style!css!sass'
}或者
{
    test:/\.scss$/,
    loader:'style-loader!css-loader!sass-loader'
}
sass和scss一起配置:
{
    test:/\.(scss|sass)$/,
    loader:'style!css!sass'
}或者
{
    test:/\.(scss|sass)$/,
    loader:'style-loader!css-loader!sass-loader'
}

less:Less是一个动态CSS语言框架,Less扩展了CSS的动态特性。
安装加载器命令:

npm install less less-loader --save-dev

less-loader需要依赖less才能实现,但是less是不会随着less-loader自动安装。
配置加载器:

{
    test:/\.less$/,
    loader:'style-loader!css-loader!less-loader'
}或者
{
    test:/\.less$/,
    loader:'style!css!less'
}

最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持,在CSS loader中进行配置后,你所需要做的一切就是把”modules“传递都所需要的地方,然后就可以直接把CSS的类名传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下

{
    test: /\.css$/,
    loader: 'style!css?modules'//跟前面相比就在后面加上了?modules
}

(2)图片类型的加载器(png|PNG|jpg|JPG|jpeg|JPEG|gif|GIF)
安装加载器命令:

npm install url-loader file-loader --save-dev

配置加载器:

{
    test: /\.(png|PNG|jpg|JPG|jpeg|JPEG|gif|GIF)$/,
    loader: 'url-loader?limit=8192'
}
或者
{
    test: /\.(png|PNG|jpg|JPG|jpeg|JPEG|gif|GIF)$/,
    loader: 'url-loader?limit=1000000&name=img/[name].[ext]'
}

limit的意思是如果图片文件的大小超过了8192字节,就会被打包到bundle文件之外,反之就是打包到bundle文件之内。如果你想把所有的图片文件都打包到bundle之外,你可以设置limit=1,如果你想把所有的图片文件都打包到bundle之内,你可以设置limit等于一个很大的值,一般情况是建议使用默认的值8192。name设置的是打包在bundle文件之外的图片的路径,这里的意思是放到img文件夹下面,img可以修改你要的路径。
[name]配置图片名字和打包之前的名字一样,如果是name=img/[hash:16].[ext],[hash:16]配置图片名字以16位的hash值显示,默认情况以32位的hash值显示,可以写成[hash:32]或者[hash],没有加name属性的'url-loader?limit=8192'命令也是以默认的32位hash值显示。

(3)Babel之前是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。但Babel 6现在不仅仅是作为ES2015的转换器,而是作为一个JavaScript工具平台,因此我们决定让所有的插件都是可插拔的。这就意味着,如果你现在直接安装Babel的最新版本,那么默认情况下它并没有用来转换ES2015的代码的功能,你需要安装相应的转换器插件。

如果开发中使用webpack就可以使用babel 提供的 babel-loader 插件,用于在 Webpack 中加载 babel 编译 js 文件。Babel官方提供以下的规则集,你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段）,选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

Babel 6其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,不过webpack把它们整合在一起使用,但是对于每一个你需要的功能或拓展,你都需要安装单独的包,用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包。

使用JSX和ES6来编写React需要安装的插件命令(安装babel插件):

npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

配置babel

{
    test: /\.jsx?$/,//js
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',//这里还可以使用babel-loader
    query: {
        presets: ['es2015', 'react']
    }
}

或者使用如下配置:

{
    test: /\.jsx?$/,//js
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
        presets: ['es2015', 'react']
    }
}

query可以去掉,在.babelrc文件中配置如下代码也可以:

{
  "presets": ["react", "es2015"]
}

去掉query也不在.babelrc文件中配置的一种方式:(如果使用react-hot-loader，就不能使用query和.babelrc文件。因为使用react-hot-loader的时候，这里的loaders是一个数组)

{
    test: /\.jsx?$/,//js
    exclude: /node_modules/,
    loader: 'babel?presets[]=react,presets[]=es2015'
}

说明:loader配置的时候,一般情况下-loader是可以省略的,所以这里使用的是babel,其他的loader类似。如果这里是jsx,就可以编译.js或者是.jsx带有jsx语法的文件,如果这里是js,就只能编译.js带有jsx语法的文件,所以这里推荐使用jsx。

浅谈JavaScript、ES5、ES6参考资料:点击打开链接和点击打开链接
Babel 6.0全新特性解析参考资料:点击打开链接
入门Webpack参考资料:点击打开链接
理清React开发中的一些疑惑参考资料:点击打开链接

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）介绍了Webpack的配置和loader,本来还要介绍package.json和插件的，插件包括打包的优化等一些深入的东西，由于东西比较多一篇博客写不完，所以后面还会写WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展），适合比较了解WebPack的同学学习。

WebPack安装-使用-Loader-配置-插件-环境-排错详解（上）

博客地址：http://blog.csdn.net/pcaxb/article/details/53390151

下载地址：http://download.csdn.net/detail/pcaxb/9696873

WebPack安装-使用-Loader-配置-插件-环境-排错详解（中）

博客地址：http://blog.csdn.net/pcaxb/article/details/53393997

下载地址：http://download.csdn.net/detail/pcaxb/9697579

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下）

博客地址：http://blog.csdn.net/pcaxb/article/details/53466261

下载地址：http://download.csdn.net/detail/pcaxb/9702314

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）

博客地址：http://blog.csdn.net/pcaxb/article/details/53515234

下载地址：http://download.csdn.net/detail/pcaxb/9705351