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

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

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

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的同学学习。

package.json(包括更多的webpack命令)
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。NPM可以从服务器下载别人编写的第三方包或命令行程序到本地使用,也可以将自己编写的包或命令行程序上传到服务器供别人使用。使用npm init命令可以自动创建这个package.json文件,输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。

如果package.json格式错误，打包时会报 ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'让人很摸不着头脑，添加参数--display-error-details 才知道是package.json解析错误。npm的start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}如npm run build。

package.json文件内部就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。
下面是一个更完整的package.json文件:

{
  "name": "项目名称",
  "version": "1.0.0",
  "description": "项目描述",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //项目命令行缩写
  },
  "keywords": ["node.js","javascript"],
  "author": "作者信息",
  "license": "ISC",
  "dependencies": {
    "webpack": "^1.13.3"
  },
  "devDependencies": {
    "webpack-dev-server": "^1.16.2"
  }
}

package.json文件的部分字段的含义如下:
name 项目名称(必须),是一个字符串
version 项目版本号(必须),是一个字符串
description 项目描述,是一个字符串
main 字段指定了加载该模块时的入门文件,默认是模块根目录下面的index.js,,是一个字符串
scripts 指定了运行脚本命令的npm命令行缩写,比如start指定了运行npm run start时，所要执行的命令,是一个对象
keywords npm包的关键字，是一个字符串的数组,如["node.js","javascript"]
author 作者个人信息,,是一个字符串
license 指定一个license来让用户知道他们的使用权利和和任何限制
dependencies 指定了项目运行所依赖的模块
devDependencies 指定项目开发所需要的模块
更多的配置资料:点击打开链接  点击打开链接 点击打开链接

WebPack命令参数含义:
基本命令:webpack
本地服务器命令:webpack-dev-server
React生产环境命令:NODE_ENV=production
--watch 可以改变一个文件而让webpack实时编译,也可以在配置文件中配置。
--config webpack.production.config.js 可以把默认的配置文件webpack.config.js改成自定义文件,便于开发环境和生产环境切换。
--progress 可以显示编译进度
--colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
--config 输出性能数据，可以看到每一步的耗时
--content-base build 或者 --content-base ./build 可以修改本地服务器webpack-dev-server的路径,默认是根目录
-p 默认使用UglifyJsPlugin这个插件,但是会报警告,所以按照需求在配置文件中配置,一般不直接使用
--devtool eval 配置Source Maps(提高调试效率),有多个选项。

插件
插件（Plugins）是用来拓展Webpack功能的,使webpack更加的灵活和强大,它们会在整个构建过程中生效,执行相关的任务。webpack有两种类型的插件:webpack内置的插件(安装webpack之后不需要安装,直接配置就可以)和webpack外置插件。一般情况下我们会创建一个开发的webpack.config.js文件和一个生产的webpack.product.config.js文件,开发的webpack.config.js在前几篇中博客(WebPack安装-使用-Loader-配置-插件-环境-排错详解)中已经讲述过,本文开始位置和结束位置都有链接。首先新创建一个webpack.product.config.js的文件作为我们的生产配置文件,可以把webpack.config.js文件中的内容复制到webpack.product.config.js中,然后再按照需求添加一些生产环境需要的配置。

使用插件减少编译后js文件的体积和优化编译后的js文件,下面是优化过程:
       (1)插件       (2)插件        (3)插件      (4)插件          (5)配置         (6)插件   (7)插件
171kb----->171kb----->55.9kb----->35.1kb----->30.16kb----->26.76kb----->说明----->说明
步骤(4)插件和(5)配置的说明:33.2+1.56=34.76kb(只分离css)/31.7+2.59=34.29kb(分离css和scss)/27.9+2.66=30.16(分离css和scss和less),分离完css之后可以按需分离图片,分离图片之后js文件变小CSS大小不变24.1+2.66=26.76kb
步骤(6)插件说明:4.16(bundle本身业务逻辑)+2.66(css样式)+143(vendor第三方库) = 149.82kb,由于这里只是一个DEMO编译后js文件的体积比较小,如果你打包一个几M的项目,这里是可以看到明显的效果的。
步骤(7)插件说明:4.15(bundle本身业务逻辑)+2.66(css样式)+141(vendor第三方库) = 147.81kb,如果你是比较小的DEMO,按照需求去掉步骤(6)插件,直接使用步骤七

(1)实现版权声明的插件

var webpack = require('webpack');//声明webpack
配置插件
plugins: [
    new webpack.BannerPlugin("这里写版权声明和作者信息等。")//在这个数组中new一个就可以
]

说明:这个插件可以让你打包出来的文件,不管是js还是css都能带上你的版权申明和作者信息等

(2)实现压缩混淆的插件

var webpack = require('webpack');//声明webpack
配置插件
new webpack.optimize.UglifyJsPlugin({
    output: {
        // remove all comments(注释)
        comments: false
    },
    compress: {
        //不显示警告
        warnings: false
    },
    mangle: {
        //mangle 通过设置except数组来防止指定变量被改变 (防止指定变量被混淆)
        except: ['$super', '$', 'exports', 'require']
    }
})

说明:UglifyJsPlugin还可以设置更多的选项来满足个性化需求,默认情况下没有配置UglifyJsPlugin插件的时候,使用webpack -p默认使用这个插件,但是会报警告,所以按照需求配置。UglifyJsPlugin它既可以压缩js代码也可以压缩css代码,其实并不能说是在压缩css代码，本质来说还是压缩js代码，再将这块代码输出到css文件中。
UglifyJsPlugin更多的配置参考:英文资料:点击打开链接  中文资料:点击打开链接

(3)实现React切换到产品环境的插件

var webpack = require('webpack');//声明webpack
配置插件
new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    },
})

说明:这时候打包的时候命令要带上node的环境设置NODE_ENV=production,原来的命令接到后面,类似如下命令

NODE_ENV=production webpack --progress --colors --config webpack.product.config.js

更多配置资料：点击打开链接

(4)实现分离css的插件
安装extract-text-webpack-plugin命令:

npm install extract-text-webpack-plugin --save-dev

申明ExtractTextPlugin插件:

var ExtractTextPlugin = require("extract-text-webpack-plugin");

配置插件

{
    test:/\.css$/,
    // loader:'style-loader!css-loader'
    loader:ExtractTextPlugin.extract("style-loader","css-loader")
},
{
    test:/\.(scss|sass)$/,
    //loader:'style-loader!css-loader!sass-loader'
    loader:ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
},
{
    test:/\.less$/,
    //loader:'style-loader!css-loader!less-loader'
    loader:ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}

说明:less和scss和css你可以按照你自己的需求配置

plugins:[
    new ExtractTextPlugin("entry.bundle.css")
]

CSS分理成多个CSS文件资料:点击打开链接

(5)通过配置图片加载器的参数减少编译后js文件的体积

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

默认limit这里是8192字节,超过默认的图片打包到文件夹中,没有超过默认的图片打包到bundle中,修改limit=1,把所有的图片都打包到文件夹中。limit越小打包到文件夹中的图片越多网络请求越多包体积小,limit越大打包到文件夹中的图片越少包体积大,所以大家可以根据具体情况配置limit的大小。

(6)实现业务代码和第三方库分离的插件

var webpack = require('webpack');//声明webpack
配置插件
entry:
{
    //和前面博客(WebPack安装-使用-Loader-配置-插件-环境-排错详解)中
    //说的多输入多输出类似,将业务代码和第三方库分离
    //业务代码
    bundle:__dirname+'/app/entry.js',
    //第三方库
    //根据自己的需求修改
    //比如//vendor: ["react","react-dom","react-router","@fdaciuk/ajax"]
    vendor: ["react","react-dom"]
},
output:
{
    path:__dirname+'/build',
    filename:'[name].[chunkhash:24].js'
},

plugins:[
    //将第三方库打包到vendor.chunkhash.js
    //这里的name是配置文件里面入口文件entry的键名
    //关于name不同的解释参考http://www.cnblogs.com/liuyt/p/5810042.html
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
]

hash和chunkhash的区别资料:点击打开链接
filename和chunkFilename的资料:点击打开链接
说明:请看步骤(6)插件说明更多优化资料:点击打开链接  点击打开链接

(7)实现多个JS库删除交叉依赖的插件

var webpack = require('webpack');//声明webpack
配置插件
new webpack.optimize.DedupePlugin()

说明:有些JS库有自己的依赖树，并且这些库可能有交叉的依赖，DedupePlugin可以找出他们并删除重复的依赖,减少包的体积。

(8)实现自动生成html的插件
安装html-webpack-plugin命令:

npm install html-webpack-plugin --save-dev

申明html-webpack-plugin插件:

var HtmlWebpackPlugin = require('html-webpack-plugin');

配置插件

new HtmlWebpackPlugin({
    title: 'WebPack插件研究',//设置title的名字
    filename: 'index.html',//设置这个html的文件名
    template: './common.html', // Load a custom template
    inject: 'body', // Inject all scripts into the body
    hash:true,//是否hash化 true|false
    cache:true//是否缓存
})

如果配置模板template的话,可以直接使用以下方式配置

new HtmlWebpackPlugin({
    filename: 'index.html',//设置这个html的文件名
    template: './common.html', // Load a custom template
    inject: 'body', // Inject all scripts into the body
})//默认带缓存,hash值可以到output的时候配置

说明:如果使用了模板,这里的title是没有效果的,可以在模板中定义title。模板随便放到哪个位置,和entry类似的方式配置路径。更多的配置参考资料: 点击打开链接

WebPack常用插件资料:点击打开链接  点击打开链接
WebPack开发和部署技巧资料:点击打开链接
WebPack实例与前端性能优化资料:点击打开链接
Webpack资料:点击打开链接
大公司里怎样开发和部署前端代码点击打开链接
优化webpack打包体积过大:点击打开链接  点击打开链接

WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）详细介绍WebPack的插件、命令和package的配置， 涉及到Webpack打包性能优化和使用技巧，适合比较了解WebPack的同学学习。WebPack差不多就介绍到这里，后面还有很多东西需要去优化和了解，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