Webpack 入門教程3

標籤：webpack 入門教程3

16.如果我們需要在項目中使用CSS,那麼我們就需要安裝css-loader和style-loader模組

cnpm install css-loader style-loader

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/8D/B8/wKiom1inv-SD8E21AAATnaKAbpU449.png-wh_500x0-wm_3-wmp_4-s_2298425487.png" title="16.png" alt="wKiom1inv-SD8E21AAATnaKAbpU449.png-wh_50" />

17.在項目的根目錄中建立style.css檔案,檔案內容如下

echo ... > style.css

/*style.css中的檔案內容*/body{        //設定背景色為灰色background: #ccc;}

650) this.width=650;" src="https://s2.51cto.com/wyfs02/M01/8D/B8/wKiom1inwKbxTRhnAAAJ25kOdw0132.png-wh_500x0-wm_3-wmp_4-s_2267074445.png" title="17.png" alt="wKiom1inwKbxTRhnAAAJ25kOdw0132.png-wh_50" />

18.修改runoob1.js檔案,內容如下

/*runoob1.js中的檔案內容*/require("!style-loader!css-loader!./style.css");document.write(require("./runoob2.js"));

19.使用Webpack重新打包runoob1.js為bundle.js

webpack runoob1.js bundle.js

650) this.width=650;" src="https://s4.51cto.com/wyfs02/M00/8D/B8/wKiom1inwmXQEef3AAAmuOPtwHQ042.png-wh_500x0-wm_3-wmp_4-s_435157049.png" title="19.png" alt="wKiom1inwmXQEef3AAAmuOPtwHQ042.png-wh_50" />

20.在瀏覽器中運行index.html檔案,輸出內容如下

650) this.width=650;" src="https://s3.51cto.com/wyfs02/M02/8D/B8/wKiom1inwsWz2WqdAAAf32WpSF0421.png-wh_500x0-wm_3-wmp_4-s_1183316214.png" title="20.png" alt="wKiom1inwsWz2WqdAAAf32WpSF0421.png-wh_50" />

本文出自 “素顏” 部落格，請務必保留此出處http://suyanzhu.blog.51cto.com/8050189/1899010

Webpack 入門教程3