webpack入門

關(guān)于webpack有啥用印蔬,就不說了狼荞,直接入門派哲。記錄下如何操作webpack偎血。
首先來一個(gè)package.json文件
npm init -y得到package.json配置文件

安裝

文檔中是:

npm install webpack webpack-cli --save-dev

我全部用的 sudo cnpm安裝下邊所有的依賴

一、第一次嘗試

創(chuàng)建

創(chuàng)建目錄與文件
dist
  >index.html
src
  >index.js
設(shè)置index.html為:
<!doctype html>
<html>
<head>
    <title>webpack-demo</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>
設(shè)置index.js為:

(這里的inex.js實(shí)際上就是我們雕沉,整個(gè)項(xiàng)目的入口文件集乔,待會(huì)看的比較清楚)

function component() {
    var element = document.createElement('div');
    element.innerHTML = 'hello webpack'

    return element
}
document.body.appendChild(component())
運(yùn)行

npx webpack運(yùn)行,發(fā)現(xiàn)dist目錄下坡椒,生成一個(gè)main.js文件扰路,我們?cè)赿ist目錄下,啟動(dòng)http-server倔叼,是可以正常訪問的汗唱。

使用配置文件來解決這個(gè)問題:
在根目錄下創(chuàng)建webpack.config.js
看到入口以及出口,我們添加mode

const path = require('path');

module.exports = {
 mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

現(xiàn)在如看main.js丈攒,還能看一點(diǎn)~

二哩罪、使用scss

當(dāng)然是使用sass-loader

來一個(gè)scss文件

我們?cè)趕rc目錄下創(chuàng)建style.scss

div {
    width: 600px;
    height: 300px;
    margin: 0 auto;
    background: rosybrown;
    >span {
        display: inline-block;
        padding: 20px;
    }
}

安裝sass-loader

不過需要提前安裝style-loader css-loader

npm install sass-loader node-sass webpack --save-dev

設(shè)置

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 將 JS 字符串生成為 style 節(jié)點(diǎn)
      }, {
          loader: "css-loader" // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
      }, {
          loader: "sass-loader" // 將 Sass 編譯成 CSS
      }]
    }]
  }
};

運(yùn)行

就可以了~style就插入到head中了

三、使用ES6

ES6巡验,在一些地方還不支持际插,我們需要使用babel將其轉(zhuǎn)化為ES5。當(dāng)然是使用babel-loader

來一點(diǎn)es6

我們?cè)趇ndex.js中显设,將var 換為let框弛,添加

console.log([1,2,3].map(x => x * x))

安裝babel-loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

使用

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

運(yùn)行

運(yùn)行發(fā)現(xiàn),實(shí)際上捕捂,已經(jīng)將es6的語法轉(zhuǎn)化為es5

四瑟枫、圖片

使用file-loader

安裝

npm install --save-dev file-loader

引入

在index.js引入

import img from './google.png'

創(chuàng)建img標(biāo)簽

    let elementImg = document.createElement('img')
    elementImg.src = img
    elementDiv.appendChild(elementImg)

配置

webpack.config.js的rules中添加配置

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }

運(yùn)行就行~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末斗搞,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子慷妙,更是在濱河造成了極大的恐慌榜旦,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件景殷,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡澡屡,警方通過查閱死者的電腦和手機(jī)猿挚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來驶鹉,“玉大人绩蜻,你說我怎么就攤上這事∈衣瘢” “怎么了办绝?”我有些...
    開封第一講書人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)姚淆。 經(jīng)常有香客問我孕蝉,道長(zhǎng),這世上最難降的妖魔是什么腌逢? 我笑而不...
    開封第一講書人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任降淮,我火速辦了婚禮,結(jié)果婚禮上搏讶,老公的妹妹穿的比我還像新娘佳鳖。我一直安慰自己,他們只是感情好媒惕,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開白布系吩。 她就那樣靜靜地躺著,像睡著了一般妒蔚。 火紅的嫁衣襯著肌膚如雪穿挨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評(píng)論 1 314
  • 那天面睛,我揣著相機(jī)與錄音絮蒿,去河邊找鬼。 笑死叁鉴,一個(gè)胖子當(dāng)著我的面吹牛土涝,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播幌墓,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼但壮,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼冀泻!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蜡饵,我...
    開封第一講書人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤弹渔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后溯祸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肢专,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年焦辅,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了博杖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡筷登,死狀恐怖剃根,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情前方,我是刑警寧澤狈醉,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站惠险,受9級(jí)特大地震影響苗傅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜班巩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一金吗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧趣竣,春花似錦摇庙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至单匣,卻和暖如春夕凝,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背户秤。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工码秉, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人鸡号。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓转砖,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親鲸伴。 傳聞我的和親對(duì)象是個(gè)殘疾皇子府蔗,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

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