使用代理的方式參考地址：http://www.cnblogs.com/wangyongcun/p/7665687.html

npm 常用模塊

npm init 創建package.json文件

一值回車

npm install 創建<module-name>文件

npm undate 更新模塊

npm uninstall 卸載模塊

?

這個就是app/index.js打包成build/build.js

?---

module.exports 初始值為一個空對象 {}

exports 是指向的 module.exports 的引用

require() 返回的是 module.exports 而不是 exports

webpack命令

打包命令：? webpack app/index.js? build/build.js

app/index.js 是入口文件

build/build.js是打包后的文件

app.js
module.exports="歡迎光臨"
在index.js里面使用
var str=require('./app.js');
document.body.innerHTML="<div>"+str+"</div>"
在index.js里面的另一種寫法

define(["./app.js"],function(str){
? document.body.innerHTML="<div>"+str+"</div>"
})

?

需要一個css模塊加載器

模塊加載器（loader）

各種不同文件類型的資源，webpack有對應的模塊loader

更多參考：

http://webpack.github.io/docs/using-loader.html

https://webpack.js.org/concepts/loaders/

安裝加載器

npm install xxx.loader --save-dev

-------

?使用css需要安裝兩個loader? ? ?css-loader style-loader

index.js加入

var str=require('./app.js');

require("style!css!./css/style.css");//這里的style!css!不能寫反，一般這里是從右往左讀的
document.body.innerHTML="<div>"+str+"</div>"

引入css

style.css里面
@import "./common.css"

----------------------------------------------------

新建webpack.config.js進行webpack打包文件配置

webpack配置文件說明
module.exports={
　　//
}
entry:打包的入口文件
output:打包結果
　　path:定義輸出文件路徑
　　filename:指定打包文件名稱
module:定義對模塊的處理邏輯
　　loaders:定義一系列加載器
　　　　[{
　　　　　　test:正則，匹配的文件后綴名
　　　　　　loader/loaders：string|array處理匹配
　　　　　　include：String|Array包含的文件夾
　　　　　　exclude:String|Array排除的文件夾
　　　　}]
resolve:{
　　extensions:['','.js','.css','jsx']//自動補全識別后綴
}

?配置代碼

webpack.config.js配置 module.exports={// } module.exports={/*入口文件*/entry:'./app/index.js',/*打包位置*/output:{/*路徑*/path:"./build/",/*文件名*/filename:'build.js',
　　　　　
　　　　　/*publicPath用于索引做到實時變化數據*/

? ? ? ? ?publicPath:"build/"

},/*模塊*/modules:{/*加載器*/loaders:[{/*正則匹配后綴*/test:/\.css$/,/*加載器*/loader:["style","css"]}]},resolve:{extensions:['','.js','.css','jsx']//自動補全識別后綴 } }

?webpack打包服務器

webpack-dev-server

輕量級服務器，修改文件源碼，自動刷新頁面就能把修改同步到頁面上

安裝webpack-dev-server

　　npm install webpack-dev-server -g

　　安裝后在命令行使用webpack-dev-server命令

　　依賴寫入package.json

　　　　npm install webpack-dev-server --save-dev

然后直接webpack-dev-server運行。。。然后直接localhost:8080就可以直接訪問了

自動刷新webpack-dev-server --hot? --in

在webpack.config.js中配置服務

devServer:{}

-------------------

??webpack-dev-server --hot? 指令

轉載于:https://www.cnblogs.com/zhihou/p/7864954.html

總結

以上是生活随笔為你收集整理的webpack搭建自己的项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。