<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          一步一步webpack,webpack的學習入門

          時間:?2017-11-22閱讀:?913標簽:?webpack

          webpack是前端工程構建的一套工具,為什么一個程序稱之為一套呢,是因為webpack其實是npm的一個模塊,使用起來的話,這期間還需要很多其它模塊來進行支持,所以我稱之為一套工具。

          webpack的功能與grunt和gulp都是基于node的,所以希望你有一個node基礎,如果還沒有,那么先學習一下node吧,這是阮一峰的教程,很不錯,不過還需要多了解node的API,可以訪問官網學習

          一、webpack安裝

          webpack通過npm安裝(安裝完node之后npm也一起打包安裝好了),全局安裝命令如下:

          $ npm install -g webpack

          全局安裝之后你就可以隨處使用webpack這個命令,也可以本地安裝(切換到項目目錄內安裝):

          $ npm install webpack --save-dev

          本地安裝完畢你并不能用webpack命令,因為shell不知道有這個命令,你還需要把你本地的注冊到環境變量或者通過軟連接ln -s命令鏈接到/usr/local/bin/下,才能使用這個命令。當然通過直接執行本地安裝的webpack也是可以的,不過要敲不少的路徑,很麻煩,像這樣:

          $ node_modules/.bin/webpack

          不如全局安裝,然后這樣執行方便啊

          $ webpack

          二、webpack運行需要的要求

          webpack運行還需要一個文件,默認名為:webpack.config.js的文件,他的主要作用就是告訴webpack運行之后干什么,從哪找源碼,用什么手段處理,處理完之后放到哪,必不可少的。當你運行webpack命令的時候,他默認就會讀取這個文件,如果你有多個配置文件,可以通過如下命令告訴webpack

          $ webpack --config XXX.js

          三、webpack運行方法

          運行方法剛才不是說了嗎?其實我們通過webpack運行webpack.config.js文件可以執行我們的工程,還有一個方法,就是通過node來執行我們的webpack,像這樣(這一塊了解了解):

          $ node webpack-node.js

          webpack-node.js:

          var webpack = require('webpack');
          
          webpack({
          // 入口文件,也就是源文件,我們要對src/js/page/index.js進行處理
              entry: {
                  index: './src/js/page/index.js'
              },
              // 處理完輸出到dist/js/page目錄下,文件名為index.js,這個[name]是指entry.index
              output: {
                  path: 'dist/js/page'
                  , filename: '[name].js'
              },
              module: {
                  //加載器配置,這里用到了npm的其它模塊style-loader,css-loader,jsx-loader,sass-loader,url-loader,其中'-loader'是可以省略的,多個loader之間用!鏈接,loader之后的?是參數,具體看各個loader的要求了.
                  loaders: [
                      {test: /\.css$/, loader: 'style-loader!css-loader'}
                      , {test: /\.js$/, loader: 'jsx-loader?harmony'}
                      , {test: /\.scss$/, loader: 'style!css!sass?sourceMap'}
                      , {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
                  ]
              },
              //其它解決方案配置
              resolve: {
                  root: process.cwd()                             //絕對路徑,alias模塊的查找目錄
                  , extensions: ['', '.js', '.json', '.scss']     // 通過require的時候可以省略這些擴展名
                  , alias: {                                      // 別名require('resetCss')代表require(process.cwd+'src/css/reset.scss');
                      resetCss: 'src/css/reset.scss',
                      allComponentCss: 'src/css/allComponent.scss'
                  }
              }
          }, function (err, stats) {
              if (!stats.hasErrors()) {
                  console.log('編譯成功')
              }
          });

          也就是說,webpack除了可以直接用命令來執行,通過node也可以融合到后端進行開發。

          四、webpack.config.js簡要說明

          這個配置文件怎么寫呢,我們都知道,要想使用一個東西,就要遵守它的約定,不然它可不懂你要干什么。如果學習了node,我們知道node的模塊開發是遵循CommonJS的,webpack也是這樣,因此這個配置文件看起來是這樣的:  

          module.exports = {
              // 入口文件,也就是源文件,我們要對src/js/page/index.js進行處理
              entry: {
                  index: './src/js/page/index.js'
              },
              // 處理完輸出到dist/js/page目錄下,文件名為index.js,這個[name]是指entry.index
              output: {
                  path: 'dist/js/page'
                  , filename: '[name].js'
              },
              module: {
                  //加載器配置,這里用到了npm的其它模塊style-loader,css-loader,jsx-loader,sass-loader,url-loader,其中'-loader'是可以省略的,多個loader之間用!鏈接,loader之后的?是參數,具體看各個loader的要求了.
                  loaders: [
                      {test: /\.css$/, loader: 'style-loader!css-loader'}
                      , {test: /\.js$/, loader: 'jsx-loader?harmony'}
                      , {test: /\.scss$/, loader: 'style!css!sass?sourceMap'}
                      , {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
                  ]
              },
              //其它解決方案配置
              resolve: {
                  root: process.cwd()                             //絕對路徑,alias模塊的查找目錄
                  , extensions: ['', '.js', '.json', '.scss']     // 通過require的時候可以省略這些擴展名
                  , alias: {                                      // 別名require('resetCss')代表require(process.cwd+'src/css/reset.scss');
                      resetCss: 'src/css/reset.scss',
                      allComponentCss: 'src/css/allComponent.scss'
                  }
              }
          }

          五、webpack的loader

          在webpack.config.js的module.loaders里,我們配置了對應文件的loader模塊,這些模塊我們也需要自己安裝的,webpack只是調用,不會自己安裝的,跟安裝webpack沒啥區別,通過npm install

          $ npm install style-loader --save-dev
          $ npm install css-loader --save-dev
          $ npm install jsx-loader --save-dev
          $ npm install sass-loader --save-dev
          $ npm install url-loader --save-dev

          這只是常用的,url-loader會把8192b字節以下的圖片轉換為base64方式。具體loader的列表看這里。

          六、第一個webpack簡單工程

          我們根據webpack.config.js構建了以下目錄結構,當時實際應該是webpack.config.js根據你的目錄構建,總之目錄結構和js配置對應上:


          1. 根目錄下有npm的package.json文件,webpack的webpack.config.js文件,還有我們的index.html文件。
          2. src目錄下有分別的sass,js,images目錄和文件
          3. dist是我們準備輸出的文件
          4. node_modules是npm install之后保存模塊的文件。

          index.html文件內容:

          <!DOCTYPE html>
          <html>
          <head lang="en">
            <meta charset="UTF-8">
            <title>demo</title>
          </head>
          <body>
            <script src="dist/js/page/index.js"></script>
            <div>ok</div>
          </body>
          </html>

          src/js/page.index.js內容:

          require('resetCss'); //加載初始化樣式,這里直接可以加載是因為我們在配置文件里配置了別名
          require('allComponentCss'); //加載組件樣式
          console.log('ok');

          src/css/reset.scss內容:

          body{
              height:100%;
              width:100%;
              border:1px solid red;
          }

          src/css/allComponent.scss內容:

          div{
              border:1px solid blue;
              width:100%;
              height:80%;
              margin:0 auto;
              text-align:center;
              background:url('../images/1.png') 0 0 no-repeat;
              opacity: 0.9;
              transform: rotate(45deg);
              border-radius: 4px;
          }

          src/images里有一個小圖片,很小,就這樣!

          然后我們執行:

          $ webpack

          然后就是。。。。


          為什么我抓的圖這么大?因為我是27寸5k屏的,4核4Gi7+32G內存+4G顯存的Radeon R9 M395X+1TSSD硬盤的大MAC。

          繼續。。然后我們的dist/js/page/里就有一個index.js了,我們根目錄的html引用它,用瀏覽器打開看一下吧。。你看,我們的圖片已經是base64了,css打到head里了。

          當然這些都是初步應用,我們不可能每個工程都這樣構建一套,還需要繼續深入挖掘,但是我們已經基本會用了,碰到問題查看文檔和谷歌就能解決了,就先記錄到這里吧。

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/152

          Webpack中如何編寫一個自定義的loader

          Webpack中loader是一個CommonJs風格的函數,接收輸入的源碼,通過同步或異步的方式替換源碼后進行輸出。需要注意的是,該導出函數必須使用function,不能使用箭頭函數,因為loader編寫過程中會經常使用到this訪問選項和其他方法。

          webpack 中 import css 文件報錯: Module build failed...

          項目中引入了css文件,配置了 rules 中:在執行 webpack 命令時,發生錯誤,報錯信息:Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,經查詢,是loader順序不正確導致此問題,修改后如下:

          webpack 階段回顧 之 webpack-dev-server

          webpack-dev-server是一個讓我們可以模擬線上環境進行項目調試的工具,主要功能有:路徑重定向、瀏覽器中顯示編譯錯誤、接口代理 如解決跨域、熱更新

          《深入淺出webpack》有感

          nodejs的出現對于構建工具具有重要的意義,在沒有nodejs之前,js只能執行在瀏覽器環境下,所以意味著對發布前的js文件要進行處理,十分局限,沒有打包工具,只能用PHP腳本來處理文件

          webpack是什么?

          webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle

          webpack的optimization.namedModules

          optimization.namedModules 這個配置對于調試起來很方便,比如原本生產的一段代碼是長這樣的:很多奇怪的數字,比如最后幾行的 [0,0] 是表示了什么意思?如果配置上namedModules 為true呢

          為什么要用webpack?

          現今的很多網頁其實可以看做是功能豐富的應用,它們擁有著復雜的JavaScript代碼和一大堆依賴包。模塊化,讓我們可以把復雜的程序細化為小的文件;

          webpack 從入門到放棄

          隨著前端項目復雜程度越來越高,依賴也越來越多,為了提高項目中代碼的可復用性,前端開始提出模塊化開發的思路,前端模塊化會有以下幾個痛點:命名沖突,文件依賴,代碼復用

          Webpack知識點

          Webpack從基礎概念到項目配置,涉及知識點較多,現將學習使用過程中遇到內容記錄下來,方便以后速查。Webpack是一個模塊打包工具,在Webpack里一切文件皆模塊。通過loader轉換文件,通過plugin注入鉤子

          webpack3 升級 webpack4踩坑記錄

          安裝webpack4最新版本;這個在webpack3中,webpack本身和它的CLI是在同一個包中,webpack4中將兩個分開管理。記得添加mode用來告知 webpack 使用相應環境的內置優化

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网