【原】webpack学习笔记
之前在react的项目中有用过webpack，不过没有认真的去研究，这段时间又重新好好的学习一下webpack，发觉 webpack是一个很强大的东西。而且很好用，方便，接下来主要是做一下学习的笔记
这次我还是在react中来使用它。我的react界面是单页面的应用
首先你的项目的根目录下要有一个package.json文件，来进行安装一下相应的依赖
package.json如下
"devDependencies": {
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"jquery": "^1.12.0",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1",
"react-router":"^1.0.0",
"react": "^0.14.0",
"react-dom": "^0.14.0",
}
然后npm install就行依赖文件的安装
大概的目录结构是这样子
+router #路由存放界面
+IndexComponent #组件
-index.js
-otherComponent #组件
-other.js
+css #css存放目录
-index.css
-other.css
+images #图片资源
+dist #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成
-css
-js
+app.js #路由的入口文件
+index.html
+ node_modules #所使用的nodejs模块
package.json #项目配置
webpack.config.js #webpack配置
index.html 内容如下：
这里我们还是需要手动引入的。 可以看到，我们只是引用了打包后的css和js,这个后面有说。先引入进去先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>webpack学习</title>
<link rel="stylesheet" type="text/css" href="dist/css/app.css">
</head>
<body">
<div" id="index"></div>
<script src="dist/js/vendor.bundle.js"></script>
<script src="dist/js/app.bundle.js"></script>
</body>
</html>
在react中，我们引入css是直接在js中引入的，比如我们的 index.js,当然，你也可以直接在html引入一个总的css
import React from 'react';
//引入css
require("../css/index.css");
const Index= React.createClass({
render(){
return (
<div> hello world</div>
)
}
});
export default Index;
other.js:
import React from 'react';
//引入css
require("../css/other.css");
const Other= React.createClass({
render(){
return (
<div>this is other component</div>
)
}
});
export default Other;
app.js 路由的入口文件。
其实内容随便写都行，因为主要是用来演示一下webpack的打包而已，并不是演示react-router
app.js
import { render } from 'react-dom'
import { Router, Route, IndexRoute, Link, IndexLink } from 'react-router'
import Index from '../router/IndexComponent/index.js'
import Other from '../router/OtherComponent/other.js'
render((
<Router>
<Route path="/" component={Index}>
<IndexRoute component={Index} />
<Route path="other" component={Other} />
</Route>
</Router>
), document.getElementById('index'))
webpack 配置及项目打包编译
这里是关键，在根目录下我们新建一个webpack.config.js，我们将进行一些配置，来完成我们的需求。刚开始可能不好理解，没关系测试多几次，你就会发觉它的神奇之处。
var path = require('path');
var webpack = require('webpack');
/*
extract-text-webpack-plugin插件，
将你的样式提取到单独的css文件里，如果没有它的话，webpack会将css打包到js当中
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin插件，webpack中生成HTML的插件，
可以将打包好的文件动态加载到html中
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { //配置入口文件，有几个写几个。我这里有两个文件。一个是所有我需要引入的文件，一个是我的入口文件，app.js
//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出,比如下面数组里面的js,全部压缩在了vendor这个文件这里
vendor: ['react','react-dom','react-router'],
app: [ './app.js'],
},
output: {
path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它.名字可以随便起
// publicPath: '/dist/', 很多教程的publicPath是这个，你会发觉不能动态加载到html中，会报错，实际上是下面的写法才对
publicPath: '../', //模板、样式、脚本、图片等资源对应的server上的路径
filename: 'js/[name].bundle.js', //每个页面对应的主js的生成配置。比如我的app.js打包后就为 js/app.bundle.js
chunkFilename: 'js/[id].bundle.js' //dundle生成的配置
},
module: {
loaders: [ //加载器，关于各个加载器的参数配置。
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: [path.join(__dirname, ''), path.join(__dirname, 'router')] //我需要打包的js所在的目录
},
{
test: /\.css$/,
//配置css的抽取器、加载器。'-loader'可以省去
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.less$/,
//配置less的抽取器、加载器。中间!有必要解释一下，
//根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!less')
}, {
//html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
//比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
test: /\.html$/,
loader: "html?attrs=img:src img:data-src"
}, {
//文件加载器，处理文件静态资源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
}, {
//图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
//如下配置，将小于8192byte的图片转成base64码
// base的好处可以看看这篇文章
// http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}
]
},
plugins: [
new webpack.ProvidePlugin({ //加载jq
$: 'jquery',
_:'underscore' //加载underscore
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 将公共模块提取，生成名为`vendors`bundle
chunks: ['vendor'], //提取哪些模块共有的部分,名字为上面的vendor
minChunks: Infinity // 提取至少*个模块共有的部分
}),
new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的 publickPath
// 有几个页面就写几个
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
favicon:'./images/favicon.ico', //favicon存放路径
filename:'/view/index.html', //生成的html存放路径，相对于 path
template:'./index.html', //html模板路径
inject:true, //允许插件修改哪些内容，包括head与body
hash:true, //为静态资源生成hash值
chunks: ['vendor', 'app'], //需要引入的chunk，不配置就会引入所有页面的资源.名字来源于你的入口文件
minify:{ //压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:false //删除空白符与换行符
}
})
new webpack.HotModuleReplacementPlugin() //热加载
],
//使用webpack-dev-server，提高开发效率
devServer: {
contentBase: './',
host: 'localhost',
port: 3200, //比如我是监听3200端口
inline: true, //可以监控js变化
hot: true, //热启动
}
};
好了，此时你在cmd输入 webpack 就会看到在dist那里会生成两个目录，js和css这两个文件夹，js里面有vendor.bundle.js和app.bundle.js. css里面你会发觉只有一个app.css。
html-webpack-plugin 插件，动态为html加入js和css
在前面的html中，我们是手动引入css和html的。但是webpack的这个插件可以动态将我们的js和css自动加载到html 上，也就是说。可以将
index.html改为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>webpack学习</title>
<!-- 这里无需引入样式 -->
</head>
<body">
<div" id="index"></div>
<!-- 也不在需要引入ｊｓ -->
</body>
</html>
不过我觉得这个动态加载js和css的方法用不用都无所谓。
注意：
在网上的教程中，你会发觉有些动态加载js和css到html中会报错。提示找不到那个路径，这是为什么呢，因为是他们的 publicPath这里错了。
他们的是 publicPath: '/dist/',
而实际上应该改为 publicPath: '../',
解决打包后图片出现的路径问题：
问题：
打包后，你有会发觉另一个问题，就是背景图中，小一点的图片会被转为base64，可以正常演示，但是我本地的图片，img的src中却找不到路径了。会报错。这个问题比较诡异，我网速找了好多资料都没找到怎么解决的。后来自己随便乱搞，总结出来3个解决方法：
方法1、你在引入图片的时候用这样来引入，那么就不会报错了
<img src={require("../images/cd_03.png")} />
不过我是用在react当中的，其他地方暂时没试过。虽然我的方法可以本地图片加载出来，不过始终觉得不是一个好方法
方法2：将webpack.config.js 配置中的
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
改为下面这样：
loader: 'url-loader?limit=1&name=[path][name].[ext]'
这样子修改之后，小于8k的图片不会转为base64，而且图片的名字也不会变成hash值。这样就可以找到路径了。那么如果很多比较小的图片怎么办呢，那就只能做好雪碧图了。
方法3 ：
将你的图片放到cnd上，引入图片的之后直接引入你线上的链接，这样的话图片就不会被打包，从而避免了图片的路径问题。不过要手动改动挺大的
这里顺便粘贴一下我的server.js.在根目录下
server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
process.env.NODE_ENV='production'
new WebpackDevServer(webpack(config), {
publicPath: '/dist/',
hot: true,
historyApiFallback: true
}).listen(3200, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3200');
});
最后附上 webpack命令的几种基本命令
webpack命令行的几种基本命令（https://webpack.github.io/docs/cli.html） $ webpack -h $ webpack //最基本的启动webpack方法，执行一次编译 for building once for development $ webpack -w 或 --watch //增量编译，监听变动并进行自动实时打包更新 for continuous incremental build in development (fast!) $ webpack -p // 压缩混淆脚本，对打包后的文件进行压缩，for building once for production (minification) $ webpack -d // 生成 SourceMaps映射文件，告知哪些模块被最终打包到哪里，方便调试。 to include source maps $ webpack --display-error-details 查看查找过程，方便出错时能查阅更详尽的信息 $ webpack --config XXX.js 使用另一份配置文件来打包 webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤 webpack --profile 输出性能数据，可以看到每一步的耗时 webpack --display-modules 默认情况下node_modules下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
这篇文章主要是记录一下学习webpack的笔记，具体的大家还是需要实际操作一下。webpack真的是一个神奇的东西，不单单是用在react的打包当中，用在前端的任何框架下打包都是可以的。可以说是gulp的2.0版本。值得一玩
用在react当中打包压缩的话，一个项目下来，所有的文件加起来也不过几百k,对性能肯定是有好处的。
有一篇很不错的，关于webpack的文章，可以看看 https://llp0574.github.io/2016/11/29/getting-started-with-webpack2/
