安装
全局安装
$ npm install webpack -g
一般情况下wekpack会安装到项目的依赖中，就是在已有package.json文件的情况下，通过webpack来打包模块，对模块的依赖关系进行静态分析。
如果要使用Webpack开发工具，要单独安装
npm install webpack-dev-server --save-dev
使用
首先创建一个静态页面和一个js文件
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
//entry.js
var lodash = require('lodash');
var output = lodash.without([1, 2, 3], 3);
console.log(output);
然后编译entry.js并打包到bundle.js:
$ webpack entry.js bundle.js
用浏览器打开index.html会看到按F12可以看到输出[1, 2]
可以在entry.js 添加一个新模块，
//module.js
console.log('you are ok');
//entry.js
require('./module.js')
var lodash = require('lodash');
var output = lodash.without([1, 2, 3], 3);
console.log(output);
重新打包 webpack entry.js bundle.js后刷新页面看到
loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
loader的特性
- Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
Loader 可以同步或异步执行。
Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
Loader 可以接受参数，以此来传递配置项给 loader。
Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件
Loader 可以通过 npm 发布和安装
除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
Loader 可以访问配置。
插件可以让 loader 拥有更多特性。
-
Loader 可以分发出附加的任意文件。
按照惯例，而非必须，loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader，css-loader//style.css body {background:blue}
改动entry.js
var lodash = require('lodash');
require('!style!css!./style.css');
var output = lodash.without([1, 2, 3], 3);
console.log(output);
安装loader
npm install css-loader style-loader
重新编译打包，刷新。
另外一种方法引入是
//entry.js
var lodash = require('lodash');
require('./style.css');
var output = lodash.without([1, 2, 3], 3);
console.log(output);
然后执行
$ webpack entry.js bundle.js --module-bind 'css=style!css'
配置文件
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。
在根目录创建 package.json 来添加 webpack 需要的依赖
创建一个配置文件webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path:__dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/,loader: 'style!css'}]
},
plugins: [
new webpack.BannerPlugin('This file is created by mianmian')
]
}
同时简化entry.js中的style.css加载方式：
require('./style.css');
最后运行webpack，这样结果与通过loader加载后果一样
插件
插件是比loader更高一等级的功能，一般在webpack的配置信息
plugins选项中指定
Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。
//entry.js
var veryLongLongName = "your";
veryLongLongName += " road";
document.write('<h1>' + veryLongLongName + '</h1>');
//webpack.config.js
var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
entry: './entry.js',
output: {
filename: 'bundle.js'
},
plugins: [
new uglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
输入webpack命令执行，再打开bundle.js文件，得到
!function(r){function o(e){if(t[e])return t[e].exports;var n=t[e]={exports:{},id:e,loaded:!1};return r[e].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}var t={};return o.m=r,o.c=t,o.p="",o(0)}([function(r,o){var t="your";t+=" road",document.write("<h1>"+t+"</h1>")}]);
常见问题解决
然而在对应文件夹没有该文件夹，可查找提示中位置，可能你之前安装过该环境，但是没有相对应的文件。
解决办法
找到之前安装过的文件夹，删了，重新安装一次该环境。
大部分是通过改动webpack.config.js文件从而通过webpack来编译得到结果，因为有时通过loader的时候也不知道哪里就错了。并且，通过webpack.config.js来添加配置文件modules或者插件plugins会比较快捷方便，通过require调用也不用多那么多乱七八糟的东西。
