使用webpack打包css和js

時間 2019-11-29

標籤使用 webpack 打包 css 欄目 CSS 简体版

原文原文鏈接

1.安裝webpack.javascript

npm install webpack -g

2.建立一個文件夾app.css

3.新建文件test.js.html

require("!style-loader!css-loader!./style.css");

document.write(require('./test2'));

4.新建文件test2.jsjava

module.exports = "I'm from test2.js.";

5.新建style.css.webpack

body{
 background:red;
}

6.新建一個html頁面web

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

7.如今開始打包js和css.npm

npm i css-loder style-loader  //打包以前先確保這個兩個庫已經安裝
 
webpack test.js bundle.js

　　至此，我發現文件夾中多了一個bundle.js的文件。在html頁面中引用後就能夠正常使用。app

*注意打包的CSS是這樣開頭： !style-loader!css-loader! ui

相關標籤/搜索