這個demo的大體目錄以下:javascript
須要安裝的loadercss
//這是處理css樣式的loaderhtml
npm install --save-dev css-loader java
//計算頁面的樣式的loadernode
npm install --save-dev style-loaderreact
//處理的如png,svg,eot字體等格式的文件webpack
npm install --save-dev file-loaderweb
//處理css引入資源(如圖片,字體)的loadernpm
npm install --save-dev url-loaderbootstrap
主入口文件main.js
import "./dist/css/bootstrap.css"; import "./dist/fonts/glyphicons-halflings-regular.eot"; import "./dist/fonts/glyphicons-halflings-regular.svg"; import "./dist/fonts/glyphicons-halflings-regular.ttf"; import "./dist/fonts/glyphicons-halflings-regular.woff"; import "./dist/fonts/glyphicons-halflings-regular.woff2"; import "./dist/js/bootstrap.js";
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <div id='root'> </div> <script src="bundle.js"></script> </body> </html>
module.exports = { entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件 output: { path: __dirname + "/public",//打包後的文件存放的地方 filename: "bundle.js"//打包後輸出文件的文件名 }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, //處理css樣式 { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, //處理圖片 { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, //處理字體 { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }, ] } }
安裝的依賴顯示以下:
"devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.8", "file-loader": "^1.1.6", "style-loader": "^0.19.1", "url-loader": "^0.6.2" }
最後webpack就ok了.