webpack 的使用教程
今天接觸webpack，就着官網上的教程一步一步的玩，把自己的理解總結以便和大家交流
webpack的主要特點
1. 可以把js,css,image,甚至文本當成模塊來處理，並通過require()的方法來調用。
2. 能夠自動識別模塊之間的依賴。
webpack的安裝,通常是使用npm。
創建一個文件夾vue-webpack-basic,使用命令行進入該文件夾，輸入npm install webpack,當然你也可以使用全局安裝 npm install webpack -g
2. 配置
- 在項目的根目錄上創建配置文件
webpack.config.js,它的作用如同常規的 gulpfile.js/Gruntfile.js。
- 添加如下結構目錄：
其中：
- dist是最終文件生成的目錄
- lib 一些公共的類庫
- node_modules目錄是通過npm安裝的一些模塊的目錄所在，如jquery，vue等一些框架
- src 是源碼目錄，開發時的文件都放在此目錄下
- index.html 應用入口頁面
- package.json項目描述文件
- README.md 項目說明文件
- webpack.config.js wepack工具的配置文件
各個文件的內容分別如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="dist/app.js" charset="utf-8"></script>
</head>
<body>
<div class="name"></div>
</body>
</html>
只需要在html文件中引入入口文件entry
entry.js
require('../css/index.css');
var $ = require('jquery');
console.log($('body'));
$(function(){
$('.name').text("通過jq錄入的數據");
});
document.write(require("../js/content.js"));
注意：webpack 內置的功能只能處理js，如果想要通過require()的方法來調用css，image等其他格式的文件，需要使用相應的插件：
- 使用
css-loader和style-loader通過require()來調用css- 安裝插件
npm install css-loader style-loader
- 安裝插件
- 在webpack中使用第三方庫，只需要在根目錄使用npm install
packageName下載安裝需要的庫，然后在webpack頁面中通過require()的形式加載進來，就可以直接使用了。如此處的jquery。
content.js
module.exports = "It works from content.js.";
即便是文本也可以使用CommonJs的加載到js文件中。
index.css
body{
background-color: green;
}
執行命令 webpack src/js/entry dist/app.js --modulebind 'css=style!css',即可生成最終的打包文件.
運作的流程大概如下
通過入口文件entry.js加載content.js和style.css，然后把entry.js生成到dist/app.js中，在html中直接引入文件app.js即可。
附上效果圖
是否覺得上面的命令太長了，感覺太土了？不用怕，那些參數我們都是可以通過配置文件來配置的。
module.exports = {
entry: "./src/js/entry.js",
output: {
path: "./dist",
filename: "app.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
- entry:指定入口文件
- output:指定輸出文件
- module.loaders:指定加載器，在webpack中，可以配置各種各樣的加載器，這樣我們就不需要擔心sass，less，等一些文件的編譯問題了。
現在我們就可以直接的使用命令webpack來編譯和調試我們的應用了，另外，我們還可以加入--watch 參數,這樣每次有改動的時候就不需要重新編譯應用了。
接下來還會有更加詳細的參數使用和說明，包括各種插件的使用，還有和glup的配合使用。我會在學習的過程中一一做記錄,同時直播出來和大家共同交流學習