webpack学习笔记
Posted 咸鱼老弟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
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‘);
module.exports = {
entry: { //配置入口文件，有几个写几个。我这里有两个文件。一个是所有我需要引入的文件，一个是我的入口文件，app.js
//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出,比如下面数组里面的js,全部压缩在了vendor这个文件这里
vendor: [‘react‘,‘react-dom‘,‘react-router‘],
app: [ ‘./app.js‘],
},
output: {
path: path.join(__dirname, ‘dist‘), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它.名字可以随便起
publicPath: ‘/dist/‘, //模板、样式、脚本、图片等资源对应的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码
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 webpack.HotModuleReplacementPlugin() //热加载
],
//使用webpack-dev-server，提高开发效率
devServer: {
contentBase: ‘./‘,
host: ‘localhost‘,
port: 3200, //比如我是监听3200端口
inline: true, //可以监控js变化
hot: true, //热启动
}
};
好了，此时你执行一下webpack 就会看到在dist那里会生成两个目录，js和css这两个文件夹，js里面有vendor.bundle.js和app.bundle.js. css里面你会发觉只有一个app.css
这里顺便粘贴一下我的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命令行的几种基本命令（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,对性能肯定是有好处的。
还有就是其实css和js是可以自动加载到htmL页面当中的，就是页面不需要引入css和js，它打包的时候会自动引入进去，不过我还没有学会，所以在项目中我是手动引入的。不过也不是很麻烦
以上是关于webpack学习笔记的主要内容，如果未能解决你的问题，请参考以下文章