webpack入门教程
Posted 前端开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack入门教程相关的知识，希望对你有一定的参考价值。
注：本文内容比较基础，供初学者快速入门参考。
更多详细信息请参考官方文档。
本文同步发布于我的博客，欢迎关注^_^
1. 安装
npm install -g webpack2. 基本使用
假设项目文件结构如下：
/app
|--index.html
|--main.js
|--mymodule.jsindex.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./app.js"></script>
</body>
</html>main.js和mymodule.js代码如下：
// main.js
require(‘./mymodule.js‘)();
// mymodule.js
module.exports = function() {
document.write(‘hello webpack‘);
};然后执行命令：
webpack main.js app.js会打包生成app.js文件。
3. 配置文件
每次手动输入源文件名和输出文件名比较麻烦，可以使用配置文件来进行管理。在app目录下新建webpack.config.js文件，内容如下：
module.exports = {
entry: ‘./main.js‘,
output: {
filename: ‘app.js‘
}
};然后执行
webpack就会自动生成打包好的文件了。
但是这样每次改了源文件之后都需要手动执行命令，可以通过添加watch来自动检测文件变化并重新打包。配置文件修改如下：
module.exports = {
entry: ‘./main.js‘,
output: {
filename: ‘app.js‘
},
watch: true
};配置文件中可以进行其它各种功能的相关配置，详情可以参看官方文档。
4. 使用loader
很多模块打包工具只是针对js文件，而webpack的强大之处在于将模块的概念进行了扩展，认为一切静态文件都是模块，包括css、html模板、字体、CoffeeScript等等。虽然webpack本身依然是只能够处理js文件，但是通过一系列的loader，就可以处理其它文件了。
下面以css-loader和style-loader为例，演示如何打包样式文件。首先执行如下命令安装依赖模块：
npm install css-loader style-loader --save-dev然后在app目录下新建style.css文件，内容如下：
body {
background: red;
}然后修改main.js如下：
require(‘./mymodule.js‘)();
require(‘style!css!./style.css‘);因为webpack不能够直接处理css文件，因此在require语句中需要指明需要的loader，一个文件可以经由多个loader依次处理，loader与loader之间，以及loader与文件名之间用!分隔。在这个例子中，也可以看出，如果使用了多个loader的话，数据流向是从右向左的，也就是从style.css开始，依次经过css-loader和style-loader。
但是假如有多个css文件的话，每个require语句都需要加上loader说明，很不方便，因此可以在webpack.config.js文件中进行配置，配置如下：
loaders: [{
test: /\.css$/,
loader: ‘style!css‘
}]
// or
loaders: [{
test: /\.css$/,
loaders: [‘style‘, ‘css‘]
}]关于loader的更多信息，可以参考：
5. 外部依赖
现在假如该例子中需要用到angular，首先在index.html中通过<script>标签引入angular库，然后修改mymodule.js如下：
var angular = require(‘angular‘);
angular.module(‘MyModule‘, []);此时如果执行webpack命令会报如下错误：
ERROR in ./mymodule.js
Module not found: Error: Cannot resolve module ‘angular‘ in /xxx/xxx/app
@ ./mymodule.js 1:14-32这是因为webpack无法解析angular依赖模块，此时需要在配置文件中对外部依赖进行配置：
externals: {
‘angular‘: true
}更多信息参考configuration#externals。
6. 输出类型
现在假如我们希望打包后的文件作为一个单独的库，并且遵循AMD规范可以被被requirejs来使用，可以修改配置文件如下：
output: {
filename: ‘app.js‘,
library: ‘app‘,
libraryTarget: ‘amd‘
}此时输出的app.js结构如下：
define("app", ["angular"], function( /* ... */ ) {
/* ... */
});通过配置output.libraryTarget，可以自定义输出的模块类型，包括AMD，CommonJS，变量等多种输出类型。具体可以参考configuration#output。
7. 多文件
现在假如项目目录结构如下：
/app
|--components.js
|--index.html
|--main.js
|--mymodule.js其中mymodule.js被main.js和components.js所使用。假如我们希望main.js输出为app.js，而components输出为app.components.js，则可以修改配置文件如下：
entry: {
app: ‘./main.js‘,
‘app.coomponents‘: ‘./components.js‘
},
output: {
filename: ‘[name].js‘
}以上是关于webpack入门教程的主要内容，如果未能解决你的问题，请参考以下文章
Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs