webpack即模块打包工具，在 webpack 里，所有类型的文件都可以是模块，包含我们最常见的 JavaScript，以及 css 文件、图片、json 文件等等。通过 webpack 的各种加载器，我们可以更有效地管理这些文件。
不多逼逼，看下一下如何能简单的把webpack用起来。
安装webpack
- 全局安装
<pre>$ npm install webpack -g</pre> - 版本信息
<pre>$ npm info webpack</pre> - 安装指定版本
<pre>$ npm install webpack@1.12.x</pre>
初始化一个项目
指定一个目录，如（D:/webpack/demo）
- 创建一个 package.json 文件，用于保存项目版本、依赖关系等
<pre>$ npm init</pre> - 在当前目录下安装 webpack
<pre>$ npm install webpack --save-dev</pre> - 在当前目录下创建
index.html文件
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
</body>
</html>
</pre> - 在当前目录下创建
webpack.config.js文件
<pre>
var webpack = require('webpack');
var path = require("path");
module.exports = {
//插件项
plugins: [new webpack.BannerPlugin('This file is created by liqiang')],
entry: {page1: './entry.js'},
output: {
path: __dirname,
filename: '[name].bundle.js'
},
module: {
loaders: [
//{test: /.css$/, loader: 'style-loader!css-loader'},
{test: /.css$/, loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version", "> 1%"]}'},
{
test: /.js$/,
loaders: ['babel-loader?presets[]=es2015'],
exclude: /node_modules/
},
{ test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
resolve: {
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions: ['.css', '.js', '.json', '.scss'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
js: path.join(__dirname, "./js")
}
}
}
//entry.js内容随便写，比如console.log(1)。
</pre>
<ol>
<li>plugins 是插件项</li>
<li>entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里）<pre>{
entry: {
page1: "./page1",
//支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
page2: ["./entry1", "./entry2"]
},
output: {
path: "dist/js/page",
filename: "[name].bundle.js"
}
}</pre>该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。</li>
<li>module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理，可以理解为是模块和资源的转换器，我们可根据实际需要，加载不同的loader：<pre>module: {
//加载器配置
loaders: [
// {test: /.css$/, loader: 'style-loader!css-loader'},
{test: /.css$/, loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["last 2 version", "> 1%"]}'},
{
test: /.js$/,
loaders: ['babel-loader?presets[]=es2015'],
exclude: /node_modules/
},
{ test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}</pre>注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
<pre>npm install url-loader -save-dev</pre>
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。
把其他loader加载完成<pre>$ npm install babel-loader babel-core babel-preset-es2015 --save-dev
$ npm install autoprefixer-loader --save-dev</pre></li>
<li>最后是 resolve 配置，处理路径比较复杂的文件，使引用更加简单，且可省略文件后缀。看上面代码注释！</li>
</ol>
执行webpack
以上全部完成后，运行
<pre>$ webpack</pre>
你会看到根目录下生成了一个page1.bundle.js文件，在index.html中引用这个js。
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="page1.bundle.js"></script>
</body>
</html></pre>
<p>这样打开index.html，会看到控制台输出了1。</p>
打包的常用命令：
<pre>
$ webpack --display-error-details //显示详细信息
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
$ webpack --watch //监听变动并自动打包
$ webpack -p //压缩混淆脚本，这个非常非常重要！
$ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了</pre>
实时监测
在开发过程中，代码一直修改，我们可能不喜欢每次修改都要执行下webpack命令，因此我们可以webpack-dev-server 解决实时刷新页面的问题。
安装：
<pre>$ npm install webpack-dev-server -g</pre>
安装成功后运行：
<pre>webpack-dev-server --inline</pre>
运行没问题后，打开http://localhost:8080/index.html，页面就会在 js 文件变化后自动刷新了。
网友评论