webpack是前端工程构建的一套工具，为什么一个程序称之为一套呢，是因为webpack其实是npm的一个模块，使用起来的话，这期间还需要很多其它模块来进行支持，所以我称之为一套工具。
webpack的功能与grunt和gulp都是基于node的，所以希望你有一个node基础，如果还没有，那么先学习一下node吧，这是阮一峰的教程，很不错，不过还需要多了解node的API，可以访问官网学习。
一、webpack安装
webpack通过npm安装（安装完node之后npm也一起打包安装好了），全局安装命令如下：
$ npm install -g webpack全局安装之后你就可以随处使用webpack这个命令，也可以本地安装（切换到项目目录内安装）：
$ npm install webpack --save-dev本地安装完毕你并不能用webpack命令，因为shell不知道有这个命令，你还需要把你本地的注册到环境变量或者通过软连接ln -s命令链接到/usr/local/bin/下，才能使用这个命令。当然通过直接执行本地安装的webpack也是可以的，不过要敲不少的路径，很麻烦，像这样：
$ node_modules/.bin/webpack不如全局安装，然后这样执行方便啊
$ webpack二、webpack运行需要的要求
webpack运行还需要一个文件，默认名为：webpack.config.js的文件，他的主要作用就是告诉webpack运行之后干什么，从哪找源码，用什么手段处理，处理完之后放到哪，必不可少的。当你运行webpack命令的时候，他默认就会读取这个文件，如果你有多个配置文件，可以通过如下命令告诉webpack
$ webpack --config XXX.js三、webpack运行方法
运行方法刚才不是说了吗？其实我们通过webpack运行webpack.config.js文件可以执行我们的工程，还有一个方法，就是通过node来执行我们的webpack，像这样（这一块了解了解）：
$ node webpack-node.jswebpack-node.js：
var webpack = require('webpack');
webpack({
// 入口文件,也就是源文件,我们要对src/js/page/index.js进行处理
entry: {
index: './src/js/page/index.js'
},
// 处理完输出到dist/js/page目录下,文件名为index.js,这个[name]是指entry.index
output: {
path: 'dist/js/page'
, filename: '[name].js'
},
module: {
//加载器配置,这里用到了npm的其它模块style-loader,css-loader,jsx-loader,sass-loader,url-loader,其中'-loader'是可以省略的,多个loader之间用!链接,loader之后的?是参数,具体看各个loader的要求了.
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
, {test: /\.js$/, loader: 'jsx-loader?harmony'}
, {test: /\.scss$/, loader: 'style!css!sass?sourceMap'}
, {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解决方案配置
resolve: {
root: process.cwd() //绝对路径,alias模块的查找目录
, extensions: ['', '.js', '.json', '.scss'] // 通过require的时候可以省略这些扩展名
, alias: { // 别名require('resetCss')代表require(process.cwd+'src/css/reset.scss');
resetCss: 'src/css/reset.scss',
allComponentCss: 'src/css/allComponent.scss'
}
}
}, function (err, stats) {
if (!stats.hasErrors()) {
console.log('编译成功')
}
});也就是说，webpack除了可以直接用命令来执行，通过node也可以融合到后端进行开发。
四、webpack.config.js简要说明
这个配置文件怎么写呢，我们都知道，要想使用一个东西，就要遵守它的约定，不然它可不懂你要干什么。如果学习了node，我们知道node的模块开发是遵循CommonJS的，webpack也是这样，因此这个配置文件看起来是这样的：
module.exports = {
// 入口文件,也就是源文件,我们要对src/js/page/index.js进行处理
entry: {
index: './src/js/page/index.js'
},
// 处理完输出到dist/js/page目录下,文件名为index.js,这个[name]是指entry.index
output: {
path: 'dist/js/page'
, filename: '[name].js'
},
module: {
//加载器配置,这里用到了npm的其它模块style-loader,css-loader,jsx-loader,sass-loader,url-loader,其中'-loader'是可以省略的,多个loader之间用!链接,loader之后的?是参数,具体看各个loader的要求了.
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
, {test: /\.js$/, loader: 'jsx-loader?harmony'}
, {test: /\.scss$/, loader: 'style!css!sass?sourceMap'}
, {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解决方案配置
resolve: {
root: process.cwd() //绝对路径,alias模块的查找目录
, extensions: ['', '.js', '.json', '.scss'] // 通过require的时候可以省略这些扩展名
, alias: { // 别名require('resetCss')代表require(process.cwd+'src/css/reset.scss');
resetCss: 'src/css/reset.scss',
allComponentCss: 'src/css/allComponent.scss'
}
}
}五、webpack的loader
在webpack.config.js的module.loaders里，我们配置了对应文件的loader模块，这些模块我们也需要自己安装的，webpack只是调用，不会自己安装的，跟安装webpack没啥区别，通过npm install
$ npm install style-loader --save-dev
$ npm install css-loader --save-dev
$ npm install jsx-loader --save-dev
$ npm install sass-loader --save-dev
$ npm install url-loader --save-dev这只是常用的，url-loader会把8192b字节以下的图片转换为base64方式。具体loader的列表看这里。
六、第一个webpack简单工程
我们根据webpack.config.js构建了以下目录结构，当时实际应该是webpack.config.js根据你的目录构建，总之目录结构和js配置对应上：
- 根目录下有npm的package.json文件，webpack的webpack.config.js文件，还有我们的index.html文件。
- src目录下有分别的sass,js,images目录和文件
- dist是我们准备输出的文件
- node_modules是npm install之后保存模块的文件。
index.html文件内容：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script src="dist/js/page/index.js"></script>
<div>ok</div>
</body>
</html>src/js/page.index.js内容：
require('resetCss'); //加载初始化样式，这里直接可以加载是因为我们在配置文件里配置了别名
require('allComponentCss'); //加载组件样式
console.log('ok');src/css/reset.scss内容：
body{
height:100%;
width:100%;
border:1px solid red;
}src/css/allComponent.scss内容：
div{
border:1px solid blue;
width:100%;
height:80%;
margin:0 auto;
text-align:center;
background:url('../images/1.png') 0 0 no-repeat;
opacity: 0.9;
transform: rotate(45deg);
border-radius: 4px;
}src/images里有一个小图片，很小，就这样！
然后我们执行：
$ webpack然后就是。。。。
为什么我抓的图这么大？因为我是27寸5k屏的，4核4Gi7＋32G内存＋4G显存的Radeon R9 M395X+1TSSD硬盘的大MAC。
继续。。然后我们的dist/js/page/里就有一个index.js了，我们根目录的html引用它，用浏览器打开看一下吧。。你看，我们的图片已经是base64了，css打到head里了。
当然这些都是初步应用，我们不可能每个工程都这样构建一套，还需要继续深入挖掘，但是我们已经基本会用了，碰到问题查看文档和谷歌就能解决了，就先记录到这里吧。
Webpack中如何编写一个自定义的loader
Webpack中loader是一个CommonJs风格的函数，接收输入的源码，通过同步或异步的方式替换源码后进行输出。需要注意的是，该导出函数必须使用function，不能使用箭头函数，因为loader编写过程中会经常使用到this访问选项和其他方法。
webpack 中 import css 文件报错: Module build failed...
项目中引入了css文件，配置了 rules 中：在执行 webpack 命令时，发生错误，报错信息：Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,经查询，是loader顺序不正确导致此问题，修改后如下：
webpack 阶段回顾 之 webpack-dev-server
webpack-dev-server是一个让我们可以模拟线上环境进行项目调试的工具，主要功能有：路径重定向、浏览器中显示编译错误、接口代理 如解决跨域、热更新
《深入浅出webpack》有感
nodejs的出现对于构建工具具有重要的意义，在没有nodejs之前，js只能执行在浏览器环境下，所以意味着对发布前的js文件要进行处理，十分局限，没有打包工具，只能用PHP脚本来处理文件
webpack是什么？
webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
webpack的optimization.namedModules
optimization.namedModules 这个配置对于调试起来很方便，比如原本生产的一段代码是长这样的：很多奇怪的数字，比如最后几行的 [0，0] 是表示了什么意思？如果配置上namedModules 为true呢
为什么要用webpack？
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化，让我们可以把复杂的程序细化为小的文件;
webpack 从入门到放弃
随着前端项目复杂程度越来越高，依赖也越来越多，为了提高项目中代码的可复用性，前端开始提出模块化开发的思路，前端模块化会有以下几个痛点：命名冲突,文件依赖,代码复用
Webpack知识点
Webpack从基础概念到项目配置，涉及知识点较多，现将学习使用过程中遇到内容记录下来，方便以后速查。Webpack是一个模块打包工具，在Webpack里一切文件皆模块。通过loader转换文件，通过plugin注入钩子
webpack3 升级 webpack4踩坑记录
安装webpack4最新版本；这个在webpack3中，webpack本身和它的CLI是在同一个包中，webpack4中将两个分开管理。记得添加mode用来告知 webpack 使用相应环境的内置优化