從0開始手工搭建webpack專案
阿新 • • 發佈：2019-02-15
webpack的工作方式是：通過一個配置檔案找到入口檔案，從這個入口檔案找到你專案依賴的所有資原始檔，使用對應的資源載入器(loaders)來處理這些資原始檔，最後打包成靜態檔案。
1，安裝webpack
//全域性安裝的作用是直接在命令列中使用
npm install -g webpack
//安裝到專案目錄，使用webpack的功能
npm install --save-dev webpack2,使用webpack:
在開始上手專案之前首先來搭建我們的目錄結構
例如搭建目錄結構如下：
3，package.json檔案 使用 npm init 命令可以自動生成。
4，編寫核心配置檔案——webpack.config.js檔案
var webpack = require('webpack'); var path = require('path'); module.exports = { entry: __dirname + "/public/javascript/main.js",//唯一入口檔案 output: { path: __dirname + "/public",//打包後的檔案存放的地方 filename: '[name].bundle.js',//打包後的檔名 // path: path.resolve(__dirname, 'build'),//用path的resolve方法進行解析 // publicPath: './build/'//打包後文件存放的路徑 }, devtool: 'eval-source-map',//生成後的程式碼 - 每個模組相互分離，並用模組名稱進行註釋 devServer: { //讓瀏覽器監聽你的程式碼的修改，並自動重新整理顯示修改後的結果 contentBase: "./public",//本地伺服器所載入的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時重新整理 }, module: {//module屬性主要存放解析資原始檔的各個載入器，每一個物件表示了一個載入器 rules: [ { test: /(\.jsx|\.js)$/,//test屬性表示正則匹配，用來匹配檔案的字尾名 use: { loader: "babel-loader" }, exclude: /node_modules/ }, { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true, // 指定啟用css modules localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式 } } ] } ] } };
4（可選），使用webpack構建本地伺服器
如果想讓瀏覽器監聽你的程式碼的修改，並自動重新整理顯示修改後的結果
npm install --save-dev webpack-dev-server5，編寫入口檔案 (這裡我寫的是一個簡單的登入功能，登入驗證狀態在控制檯輸出)
在/public/javascript/目錄下，編寫入口檔案main.js:
import Users from './Users'; //匯入資料類 let data = new Users(); let btn = document.getElementById('btn'); btn.onclick = function(){ let nameValue = document.getElementById('username').value; let pwdValue = document.getElementById('password').value; let user = data.findUserByUserName(nameValue); if( user == null ){ //使用者名稱不存在 console.log("使用者名稱不存在"); } else {//使用者名稱存在 if(pwdValue != user.password){//密碼錯誤 console.log("密碼錯誤"); }else{//登入成功 console.log("登入成功"); } } }
6，編寫模組檔案:
在/public/javascript/目錄下，編寫登入的資料檔案Users.js:
//儲存靜態資料的類
class Users{
constructor(){
this.users = [
{
"username":"user1",
"password":"pwd1"
},
{
"username":"user2",
"password":"pwd2"
}
];
}
findUserByUserName(username){
for(let i = 0;i<this.users.length;i++){
if(username == this.users[i].username){
return this.users[i];
}
}
return null;
}
}
export default Users;7,index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div>
<div id='root'></div>
<form action='#' method="POST">
<table>
<tr>
<td>使用者名稱：</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><input type="button" name='btn' id='btn' value="提交" col-span='2'></td>
</tr>
</table>
</form>
</div>
<script src="main.bundle.js"></script>
</body>
</html>現在專案目錄如下所示：
8,安裝babel及轉碼規則，將ES6的語法編譯為ES5的語法：
// npm一次性安裝多個依賴模組，模組之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react9，此時命令列進入該專案根目錄，輸入 npm run server命令，會問你
另外，控制檯也列印了驗證對應的提示訊息
由於以webpack-dev-server啟動的，如果修改了對應的js檔案等，專案會自動及時編譯，瀏覽器會自動重新整理頁面。