Webpack是一个前端资源加载（模块加载器）兼打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

grunt/gulp是优化前端开发流程的工具，webpack是一种模块化解决方案，为了解决可以require不同文件的需求引入了loader，初衷是require everything, bundle everything。webpack的plugins选项挤掉了gulp的市场，而npm/package.json里面的scripts很好用，调用任务写一个简单的命令就行。

grunt、gulp的工作方式：在一个配置文件中，指明对某些文件进行编译，组合，压缩，之后工具会自动完成这些步骤。
webpack的工作方式：通过一个主文件index.js，查找项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

温馨提示：本篇文章以webpack1.x为例来入门学习webpack。

一、webpack的安装
cnpm是啥东西？电脑系统识别这个命令吗？请看这里。
保证把nodejs，npm，cnpm都安装好后，下面开始安装webpack。可以用windows系统的命令行，也可以用git bash。

cnpm install webpack -g

二、webpack的使用
demo1
A、创建一个目录

mkdir app

B、在app目录中添加main.js文件

document.write("It works。");

C、在app目录中添加index.html文件

<!DOCTYPE html>
<html><head><metacharset="utf-8"><title>学习webpack</title></head><body><scripttype="text/javascript"src="bundle.js"></script></body>
</html>

D、执行命令

webpack main.js bundle.js

E、在浏览器中打开index.html

即可看到，It works。

demo2
下面以demo1为基础，添加或修改文件。
A、在app目录中添加inner.js文件

module.exports = "It works from inner.js。";

B、更新main.js

document.write(require("./inner.js"));

C、执行命令

webpack main.js bundle.js

D、在浏览器中打开index.html

即可看到，It works from inner.js。

三、webpack的loader
Webpack本身只能处理原生的JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。
所以如果我们需要在项目中添加css文件，就需要使用css-loader和style-loader，css-loader会负责遍历css文件，style-loader会把原来的css代码插入页面中的一个style标签中。
1、安装css-loader
以上面的demo2为基础，在当前目录安装css-loader和style-loader

cnpm install css-loader style-loader

全局安装，需要加-g。
执行以上命令后，会在当前目录生成node_modules文件夹，它就是css-loader和style-loader的安装目录。

2、使用css-loader
首先，在app目录中添加style.css文件

body{color:red;
}

其次，介绍3种使用css-loader的方法

方法A：修改main.js文件

require("!style-loader!css-loader!./style.css");
document.write(require("./inner.js"));

执行命令

webpack inner.js bundle.js

在浏览器中打开index.html

即可看到，It works from inner.js字体变红。

方法B：修改main.js文件，在执行命令的时候绑定。

require("./style.css");
document.write(require("./inner.js"));

执行命令

webpack inner.js bundle.js --module-bind 'css=style-loader!css-loader'

在浏览器中打开index.html

即可看到，It works from inner.js字体变红。

方法C：添加配置文件，把编译内容放在文件中，统一管理。

//修改main.js，有两种导入css的方式。//import './style.css';
require('./style.css');

//在app目录中添加webpack.config.js文件
module.exports ={entry:"./main.js",output: {path: __dirname, // __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。filename:"bundle.js"},module: {loaders: [{ test:/\.css$/, loader: "style-loader!css-loader"}]}
};

webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。

接下来我们只需要执行webpack命令，即可生成bundle.js文件。

在浏览器中打开index.html

即可看到，It works from inner.js字体变红。

最后，介绍4种使用url-loader的方法

//require
require("url-loader?mimetype=image/png!./file.png");//cli
webpack --module-bind "png=url-loader?mimetype=image/png"//配置文件
{ test: /\.png$/, loader: "url-loader?mimetype=image/png"}//配置文件
{test:/\.png$/,loader:"url-loader",query: { mimetype:"image/png"}
}

四、webpack的plugins
webpack自带一些插件（内置插件），你也可以安装一些插件。

下面以BannerPlugin为例，介绍如何安装和使用内置插件。
1、安装内置插件

cnpm install webpack --save-dev

2、修改webpack.config.js文件

var webpack=require('webpack');module.exports={entry:"./main.js",output: {path: __dirname,filename:"bundle.js"},module: {loaders: [{ test:/\.css$/, loader: "style-loader!css-loader"}]},plugins:[new webpack.BannerPlugin('尝试webpack的内置插件');]
};

执行命令webpack，打开bundle.js，可以看到文件头部出现了我们指定的注释信息，BannerPlugin插件的作用就是在编译文件中的首部插入注释信息。

上面通过一个main.js入口文件，一个index.html，一个index.js，一个style.css文件，和webpack命令，帮我们生成构建后的bundle.js。

五、常用命令
1、构建一个开发目录

webpack

2、查看所有命令

webpack -h
webpack--help

3、构建一个生产目录，对打包后的文件进行压缩混淆

webpack -p

4、生成map映射文件

webpack -d

5、连续构建，监听

webpack --watch

6、美化展示信息

webpack --colors

7、找出详细的错误信息

webpack --display-error-details

8、使用webpack.config.prod.js配置文件来打包

webpack --config webpack.config.prod.js

六、开发环境
上面都是修改完文件，执行命令后，直接打开index.html，手动刷新看效果。
这里介绍的webpack-dev-server可以实现自动刷新，它是一个小型的Node.js Express静态文件服务器，使用webpack-dev-middleware来服务于webpack的包，安装及使用方法如下。
1、安装和使用
A、安装webpack-dev-server

cnpm install webpack-dev-server -g

B、在app目录中执行webpack-dev-server

webpack-dev-server

如果自动刷新，可以这么做，不要--hot。

webpack-dev-server --inline

C、在浏览器打开http://localhost:8080/
可以浏览项目中的页面和编译后的资源输出。

也可以通过命令打开浏览器，写法如下：

webpack-dev-server --open

webpack-dev-server && open http://localhost:8080 -a 'google chrome'

注意：webpack-dev-server生成的bundle.js包并没有放在真实目录中，而是放在了内存中。

2、两种模式
webpack-dev-server支持两种模式来自动刷新页面，分别是iframe模式和inline模式，这两种模式都支持热模块替换，好处是只替换更新的部分，而不是页面重载。
A、iframe模式

这种模式不用额外配置，只要按照http://localhost:8080/webpack-dev-server/index.html格式访问url即可。

B、inline模式
这种模式，url不用变化，但是需要配置。
先配置webpack.config.js文件，可以参考官网

output:{path:'lib',publicPath:"http://127.0.0.1:8080/lib/",filename:'bundle.js'},
devServer:{contentBase: path.join(__dirname, ""),historyApiFallback:true, //不跳转hot: true,inline:true //实时刷新
},
plugins:[newwebpack.DefinePlugin({'process.env.NODE.ENV':"development"}),newwebpack.HotModuleReplacementPlugin()
]

每次敲一长串命令，是不是有些麻烦呢？配置一下package.json文件即可。

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack","server": "webpack-dev-server --open","build": "webpack-dev-server --inline"}

npm run start 替代 webpack
npm run build 替代 webpack-dev-server --inline

"scripts": {"dev": "webpack-dev-server","build": "webpack --config webpack.config.prod.js"}

运行npm run build来编译生成生产模式下的bundles；
运行npm run dev来生成开发模式下的bundles以及启动本地server。

webpack打包输出真实的文件，而webpack-dev-server开启服务输出的文件只存在于内存中，不输出真实的文件！

做过一些尝试后，你会发现webpack比较灵活，webpack.config.js和package.json对于运行项目来说，都很有用。而且，webpack.config.js文件中的参数发挥的作用等价于package.json文件中的scripts条款，如果不想在命令中拼接太多参数，可以配置webpack.config.js。

七、打包原理

在入口文件中，对每个require资源文件配置一个id。对于同一个资源，不管require多少次，它的id都是一样的，所以无论在多少个文件中require，它都只会打包一份。

转载于:https://www.cnblogs.com/camille666/p/webpack.html

webpack那些事儿相关推荐

  1. 关于Android工程师转成vue的三两事儿(4)--webpack

     最近为了能够写一份值得参考的webpack文档,特意的去查了好多相应的书籍,博客.距离上次写的那篇文章好想也过去将近一周的时间了.我想是时候要准备下一篇文章了.不然就食言而肥了.  算了,技术类文章 ...

  2. webpack 教程 那些事儿05-多页应用

    本篇主要关于如何用webpack构建多页应用 为什么要构建多页应用呢?因为我的项目本来就是多页应用啊 至于为什么要用webpack?因为我要用vue啊,嫌gulp 每次打包慢 啊 文章目录 1. 利用 ...

  3. webpack组织模块的原理 - 基础篇

    现在前端用Webpack打包JS和其它文件已经是主流了,加上Node的流行,使得前端的工程方式和后端越来越像.所有的东西都模块化,最后统一编译.Webpack因为版本的不断更新以及各种各样纷繁复杂的配 ...

  4. webpack入门学习手记（一）

    本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...

  5. 有些事儿，工程师可能今生仅此一次

    郑昀 创建于2016/9/15 最后更新于2016/9/18 关键词:深度思考,碎片化阅读,做论文,深入研究, 早先在<技术高手如何炼成>一文中提到,我会问面试者,你日常如何构建自己的知识 ...

  6. 用 vue2 和 webpack 快速建构 NW.js 项目(1)

    经过实践和学习,发现本篇文章部分内容已经过时,请看我的关于 Vue 和 NW.js 的 最新文章 和相关实践项目 vue-nw-seed . 使用到的技能点 vue2 webpack NW.js No ...

  7. webpack使用优化（基本篇）

    转自:https://github.com/lcxfs1991/blog/issues/2 前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老 ...

  8. webpack入门学习手记（一） 1

    本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...

  9. webpack 4.0 学习笔记（一）

    1.webpack可以做哪些事儿 代码的转换,文件的优化,代码的分割,模块的合并,代码的校验,自动更新,自动发布,等等. 2.安装webpack npm init  新建项目 npm install ...

最新文章

  1. 微软 AI 设计原则：成为弱者，再带来惊喜
  2. SAP-ABAP DESCRIBE FIELD 用法
  3. python怎么播放mp3_python上播放mp3歌曲
  4. Netty（二）（入门篇）传统的Bio编程
  5. 学习前端开发，那你值得css的特点有哪些？
  6. express 设置handlebars模板引擎
  7. 数据结构c语言版题库填空题,数据结构(C语言版)选择、填空题
  8. 博途v14电脑要求_博途v15对电脑配置要求
  9. Linux就业技术指导：简历项目经验示例
  10. 从安装双系统到TurtleBot3入门教程
  11. MATLAB等值线绘制
  12. matlab如何打开flt文件,科学网—grb文件的读取 (更新） - 张凌的博文
  13. TimeShift QQ群组-欢迎各界友人加入喽
  14. 一个类的属性调用另一个类的实例
  15. 密码锁 Locker
  16. excel表格怎么调整行高和列宽_WPS图文教程：表格使用小技巧
  17. bili弹幕姬_b站弹幕姬|b站弹幕姬下载_v1.0.1.126官方版_9号软件下载
  18. PCL读取ply文件
  19. DE-PPN：Document-level Event Extraction via Parallel Prediction Networks论文解读
  20. 一阶RC低通滤波器的离散化

热门文章

  1. PDA端的数据库一般采用的是sqlce数据库
  2. Java学习进阶—高级编程
  3. JAVA单向链表实现
  4. mysql+keepalived 双主热备高可用
  5. Web优化 --利用css sprites降低图片请求
  6. scikit-learn决策树算法类库使用小结
  7. uap--studio设置文本字体
  8. 解决SublimeCodeIntel回车换行误打代码
  9. VMM2012应用指南之12- 创建自助服务用户并分配云
  10. struts2遍历select