安裝
全局安裝
$ 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調用也不用多那么多亂七八糟的東西。
