webpack

http://webpackdoc.com/usage.html

npm install webpack -g
npm init -y
npm install webpack --save-dev

新建入口文件entry.js
打包入口文件webpack entry.js xxx.js

舉例說明:導(dǎo)出/入其他的模塊 module.exports、require、

webpack默認(rèn)只會處理js,如果使用它處理其它的文件比如html css json等等,需要安裝對應(yīng)的loader,loader就是轉(zhuǎn)換器,他可以把資源從一種形式,轉(zhuǎn)換成另一種形式,最終得到的還是js文件。

處理css文件npm install css-loader style-loader --save-dev
引入css文件 require('style-loader!css-loader!./css.css');

webpack的配置文件是webpack.config.js

module.exports={
    entry:'./entry.js',
    output:{
        path:__dirname,
        filename:'build.js'
    },
    module:{
        loaders:[
            {test:/\.css/,loader:'style-loader!css-loader'}
        ]
    }
};

生成開發(fā)用的服務(wù)器,在文件變化的時候自動打包,刷新頁面
npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev //把依賴寫入package.json
webpack-dev-server --inline --hot自動刷新頁面

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,243評論 0 21
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看,也希望更多的人看到...
    小小字符閱讀 8,242評論 7 35
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,515評論 2 71
  • 學(xué)習(xí)流程 參考文檔:入門Webpack,看這篇就夠了Webpack for React 一. 簡單使用webpac...
    Jason_Zeng閱讀 3,188評論 2 16
  • 剛剛過去的十一假期,發(fā)生了一件令人著惱的事情,家被盜了!情況如下: 愛人去北京進(jìn)修,因?yàn)殡y得的假期,所以帶著孩子去...
    張益達(dá)_snake君閱讀 377評論 0 1