WebPack安装-使用-Loader-配置-插件-环境-排错详解(下扩展)
2016-12-08 11:43
1486 查看
转载请注明预见才能遇见的博客: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 项目版本号(必须),是一个字符串
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)实现版权声明的插件
(2)实现压缩混淆的插件
UglifyJsPlugin更多的配置参考:英文资料:点击打开链接 中文资料:点击打开链接
(3)实现React切换到产品环境的插件
(4)实现分离css的插件
安装extract-text-webpack-plugin命令:
(5)通过配置图片加载器的参数减少编译后js文件的体积
(6)实现业务代码和第三方库分离的插件
filename和chunkFilename的资料:点击打开链接
说明:请看步骤(6)插件说明更多优化资料:点击打开链接 点击打开链接
(7)实现多个JS库删除交叉依赖的插件
(8)实现自动生成html的插件
安装html-webpack-plugin命令:
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
原文地址: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
相关文章推荐
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(下)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(上)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(中)
- vue-cli webpack在node环境下安装使用详解
- webpack安装配置使用教程详解
- 使用webpack+vue+less开发,使用less-loader,配置全局less变量
- Eclipse中php插件安装及Xdebug配置的使用详解
- Redis安装、配置、操作、持久化、主从、phpredis扩展安装使用详解之持久化与主从
- webpack的安装与环境配置
- 在Linux上安装Gearman及配置使用Gearman的PHP扩展环境
- eclipse 安装 mybatis generator 插件配置映射以及具体项目中使用详解
- Eclipse中php插件安装及Xdebug配置的使用详解
- webpack开发和生产两个环境的配置详解
- Redis安装、配置、操作、持久化、主从、phpredis扩展安装使用详解之安装配置
- Web企业实训(java、tomcat、eclipse安装、环境配置及使用)
- 手把手教你在centos下编译安装配置高性能web服务器环境nginx+php(fast-cgi)+mysql等/适合小内存vps使用
- centos6.5环境openldap实战之ldap配置详解及web管理工具lam(ldap-account-manager)使用详解
- webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)
- vue2 和 webpack 配置环境使用