国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數(shù)

pubdreamcc / 2973人閱讀

摘要：，我想大家應(yīng)該都知道或者聽過，是前端一個工具可以讓各個模塊進(jìn)行加載預(yù)處理再進(jìn)行打包。

webpack，我想大家應(yīng)該都知道或者聽過，Webpack是前端一個工具,可以讓各個模塊進(jìn)行加載,預(yù)處理,再進(jìn)行打包。現(xiàn)代的前端開發(fā)很多環(huán)境都依賴webpack構(gòu)建，比如vue官方就推薦使用webpack.廢話不多說，我們趕緊開始吧.

第一步、安裝webpack

新建文件夾webpack->再在webpack下面新建demo->命令行切換到demo目錄，使用npm init --yes 初始化項(xiàng)目的package.json文件，然后執(zhí)行npm install webpack --save-dev

第二步、全局安裝webpack(3.5.6版本): npm install webpack@3.5.6 -g 安裝完成之后用webpack -v 查看webpack的版本

第三步、新建一個index.js文件，輸入一個函數(shù)，彈出一些信息，然后調(diào)用函數(shù)，最后用webpack 打包( webpack index.js index.bundle.js )：把index.js文件打包成index.bundle.js

就會在當(dāng)前的目錄下面生成index.bundle.js文件.

第四步、新建一個index.html文件，然后引入index.bundle.js 就能使用這個js文件了

第五步、把兩個js文件一起打包合并

另外在當(dāng)前目錄下面新建一個calc.js文件，然后在用module.exports導(dǎo)出

然后在index.js文件中用var oCalc = require( "./calc.js" )引入calc.js, 在調(diào)用函數(shù)oCalc.add( 10, 20 ), 那現(xiàn)在就有了兩個函數(shù)在index.js中了， 再次執(zhí)行命令

webpack index.js index.bundle.js， 合并打包之后， 重新刷新下index.html，是不是彈出了add函數(shù)的結(jié)果呢？

第六步、loader的使用

在當(dāng)前目錄下新建style.css文件，然后用require引入index.js文件中， 執(zhí)行一次打包(webpack index.js index.bundle.js)，這個時候會報錯，報錯信息顯示為（你需要loader去處理css文件）.

第七步、安裝與使用loader

我們需要安裝兩個loader，css-loader,style-loader( 安裝命令: npm install css-loader style-loader --save-dev )， 再用require加載

再次執(zhí)行一次打包( webpack index.js index.bundle.js )，然后刷新index.html文件， 看看是否css文件中的body{ background: red } 生效了呢(瀏覽器body的背景變紅)？

第八步、更詳細(xì)的打包信息

webpack打包，后面可以跟很多參數(shù)，如:

--progress: 打包進(jìn)度

--display-modules: 打包的模塊

--colors: 是否彩色顯示 打包提示信息

--display-reasons: 打包原因

--watch: 自動監(jiān)控文件變化

等等，還有很多，可以參考官網(wǎng)


后面還有插件，配置等等很多項(xiàng)目開發(fā)中的常見的知識額

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88564.html

相關(guān)文章

  • [js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配

    摘要：還記得我們上文中的文件嗎那里面的標(biāo)簽還是寫死的文件，那么怎么把他們變成動態(tài)的文件，這個動態(tài)生成的文件會動態(tài)引入我們打包后生成的文件呢，我們可以使用插件，首先安裝這個插件，好的，接下來就開始用這個插件了官方參考文檔插件通用用法 還記得我們上文中的index.html文件嗎? 那里面的script標(biāo)簽還是寫死的index.bundle.js文件，那么怎么把他們變成動態(tài)的index.html...

    qpal 評論0 收藏0

  • [js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解(上

    摘要：接著上文，重新在文件夾下面新建一個項(xiàng)目文件夾，然后用初始化項(xiàng)目的配置文件，然后安裝，然后創(chuàng)建基本的項(xiàng)目文件夾結(jié)構(gòu)，好了，我們的又一個基本項(xiàng)目結(jié)構(gòu)就搭建好了第一開始通過文件配置我們的項(xiàng)目首先在項(xiàng)目文件夾下面，新建一個文件，這個文件可 接著上文，重新在webpack文件夾下面新建一個項(xiàng)目文件夾demo2，然后用npm init --yes初始化項(xiàng)目的package.json配置文件，然后安...

    moven_j 評論0 收藏0

  • [js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下

    摘要：本文繼續(xù)接著上文，繼續(xù)寫下的其他配置用法一把兩個文件打包成一個，怎么配置在上文中的中，用數(shù)組配置文件代碼，就是當(dāng)前文件所在的絕對路徑輸出路徑，要用絕對路徑打包之后輸出的文件名然后在目錄下面新建一個文件，代碼如下之前的文件的代碼告訴你怎么學(xué)習(xí) 本文繼續(xù)接著上文，繼續(xù)寫下webpack.config.js的其他配置用法. 一、把兩個文件打包成一個，entry怎么配置? 在上文中的webpa...

    xiangchaobin 評論0 收藏0

  • [js高手之路]深入淺出webpack教程系列5-插件使用之html-webpack-plugin配

    摘要：上文我們講到了的配置和獲取數(shù)據(jù)的方式，本文，我們繼續(xù)深入的配置一插件中的除了自己定義了一些基本配置外，我們是可以任意的添加自定義的數(shù)據(jù)文件，就是當(dāng)前文件所在的絕對路徑輸出路徑，要用絕對路徑打包之后輸出的文件名教你學(xué)我們在中新增了個 上文我們講到了options的配置和獲取數(shù)據(jù)的方式，本文，我們繼續(xù)深入options的配置 一、html-webpack-plugin插件中的options...

    lentoo 評論0 收藏0

  • [js高手之路]深入淺出webpack教程系列6-插件使用之html-webpack-plugin配

    摘要：上文我們對的實(shí)例進(jìn)行了遍歷分析，講解了幾個常用屬性以及自定義屬性的添加，本文，我們繼續(xù)深入他的配置選項(xiàng)的探討一選項(xiàng)這個屬性非常有用，可以指定某個頁面加載哪些如文件我們可以用他做多個頁面模板的生成比如，我們在實(shí)際開發(fā)中，做一個博客網(wǎng)站，一 上文我們對html-webpack-plugin的實(shí)例htmlWebpackPlugin進(jìn)行了遍歷分析，講解了幾個常用屬性( inject, mini...

    jokester 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<