相信經常使用webpack的人已經深刻體驗到自動化工具給我們帶來的便利。我自己最常用的是vue,平時就是使用vue-cli或者nuxt構建的專案，聰明的前輩已經為我們配好了專案，可以讓我們不必去配置就可以輕鬆使用。
我現在做的這個專案只有簡單的兩個頁面，不基於任何框架。
about.html,
contact.html
1-npm init webpack-config-demo 初始化專案
2-新建webpack.config webpack配置檔案
3.在webpack.config寫入配置，我的基礎配置如下：
var webpack = require('webpack');
const path = require('path')
const htmlwebpackplugin = require('html-webpack-plugin');
const extracttextplugin = require("extract-text-webpack-plugin");
const cleanwebpackplugin = require('clean-webpack-plugin');
module.exports = ,
// 配置出口
output: ,
module:
},// css處理
,// less處理
,// 處理,},
]},plugins: [
new extracttextplugin(__dirname + '/assert/css/common.less'),
// minify:
new htmlwebpackplugin(),
new htmlwebpackplugin(),
//設定每一次build之前先刪除dist
new cleanwebpackplugin(
['dist/*', 'dist/*',], //匹配刪除的檔案)],
// 起本地服務，我起的dist目錄
devserver:
}
"scripts": ,執行npm run dev的時候本地起乙個伺服器，--host --watch實現熱載入。
注意：起的ip你可以在以下：
// 起本地服務，我起的dist目錄
devserver:
目錄如下：
本次專案是簡單基礎的配置，不過已經滿足了我本次專案的需求。在後續的工作中還會根據需要再配置，並實時更新github。
與我交流：653324597
預覽：
webpack多頁面打包配置
有幾個頁面其實就可以new幾個htmlwebpackplugin物件放到記憶體中去 webpack.common.js const plugins htmlwebpackplugin會在打包結束後，自動生成乙個html檔案，並把打包生成的js自動引入到這個html檔案中 newhtmlwebpack...
vue cli和webpack多頁面配置
注 這裡使用的是vue腳手架一鍵部署 1 build檔案目錄下的webpack.base.conf.js檔案 main.js的路徑 entry 2 build檔案目錄下的webpack.dev.conf.js檔案 index.html new htmlwebpackplugin newhtmlweb...
webpack實戰 多頁面打包配置 八
在src目錄下新建list.js src index.js import react,from react import reactdom from react dom class extends component reactdom.render document.getelementbyid r...