bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

學習webpack，看完這篇文章就夠了

2021-03-16    分類： 網站建設

寫在前面的話

閱讀本文之前，先看下面這個webpack的配置文件，如果每一項你都懂，那本文能帶給你的收獲也許就比較有限，你可以快速瀏覽或直接跳過；如果你和十天前的我一樣，對很多選項存在著疑惑，那花一段時間慢慢閱讀本文，你的疑惑一定一個一個都會消失；如果你以前沒怎么接觸過Webpack，而你又你對webpack感興趣，那么動手跟著本文中那個貫穿始終的例子寫一次，寫完以后你會發現你已明明白白的走進了Webpack的大門。

// 一個常見的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
      path: __dirname + "/build",
      filename: "bundle-[hash].js"
    },
    devtool: 'none',
    devServer: {
      contentBase: "./public", //本地服務器所加載的頁面所在的目錄
      historyApiFallback: true, //不跳轉
      inline: true,
      hot: true
    },
    module: {
      rules: [{
          test: /(\.jsx|\.js)$/,
          use: {
            loader: "babel-loader"
          },
          exclude: /node_modules/
        }, {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [{
              loader: "css-loader",
              options: {
                modules: true,
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            }, {
              loader: "postcss-loader"
            }],
          })
        }
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版權所有，翻版必究'),
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html" //new 一個這個插件的實例，并傳入相關的參數
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("style.css")
  ]
};

什么是WebPack，為什么要使用它？

為什要使用WebPack

現今的很多網頁其實可以看做是功能豐富的應用，它們擁有著復雜的JavaScript代碼和一大堆依賴包。為了簡化開發的復雜度，前端社區涌現出了很多好的實踐方法

  • 模塊化，讓我們可以把復雜的程序細化為小的文件;
  • 類似于TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，并且之后還能轉換為JavaScript文件使瀏覽器可以識別；
  • Scss，less等CSS預處理器
  • ...

這些改進確實大大的提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求。

什么是Webpack

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用。

WebPack和Grunt以及Gulp相比有什么特性

其實Webpack和另外兩個并沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之后可以自動替你完成這些任務。

webpack

Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。

如果實在要把二者進行比較，Webpack的處理速度更快更直接，能打包更多不同類型的文件。

開始使用Webpack

初步了解了Webpack工作方式后，我們一步步的開始學習使用Webpack。

安裝

Webpack可以使用npm安裝，新建一個空的練習文件夾（此處命名為webpack sample project），在終端中轉到該文件夾后執行下述指令就可以完成安裝。

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

正式使用Webpack前的準備

  1. 在上述練習文件夾中創建一個package.json文件，這是一個標準的npm說明文件，里面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init命令可以自動創建這個package.json文件
npm init

輸入這個命令后，終端會問你一系列諸如項目名稱，項目描述，作者等信息，不過不用擔心，如果你不準備在npm中發布你的模塊，這些問題的答案都不重要，回車默認即可。

  1. package.json文件已經就緒，我們在本項目中安裝Webpack作為依賴包
// 安裝Webpack
npm install --save-dev webpack
  1. 回到之前的空文件夾，并在里面創建兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和我們將寫的JavaScript模塊，public文件夾用來存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來我們再創建三個文件:
  • index.html --放在public文件夾中;
  • Greeter.js-- 放在app文件夾中;
  • main.js-- 放在app文件夾中;

此時項目結構如下圖所示

webpack

我們在index.html文件中寫入最基礎的html代碼，它在這里目的在于引入打包后的js文件（這里我們先把之后打包后的js文件命名為bundle.js，之后我們還會詳細講述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Webpack Sample Project</title>
 </head>
 <body>
  <div id='root'>
  </div>
  <script src="bundle.js"></script>
 </body>
</html>

我們在Greeter.js中定義一個返回包含問候信息的html元素的函數,并依據CommonJS規范導出這個函數為一個模塊：

// Greeter.js
module.exports = function() {
 var greet = document.createElement('div');
 greet.textContent = "Hi there and greetings!";
 return greet;
};

main.js文件中我們寫入下述代碼，用以把Greeter模塊返回的節點插入頁面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

正式使用Webpack

webpack可以在終端中使用，在基本的使用方法如下：

# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，
# {destination for bundled file}處填寫打包文件的存放路徑
# 填寫路徑的時候不用添加{}
webpack {entry file} {destination for bundled file}

指定入口文件后，webpack將自動識別項目所依賴的其它文件，不過需要注意的是如果你的webpack不是全局安裝的，那么當你在終端中使用此命令時，需要額外指定其在node_modules中的地址，繼續上面的例子，在終端中輸入如下命令

# webpack非全局安裝的情況
node_modules/.bin/webpack app/main.js public/bundle.js

結果如下

webpack

可以看出webpack同時編譯了main.js 和Greeter,js,現在打開index.html,可以看到如下結果

webpack

有沒有很激動，已經成功的使用Webpack打包了一個文件了。不過在終端中進行復雜的操作，其實是不太方便且容易出錯的，接下來看看Webpack的另一種更常見的使用方法。

通過配置文件來使用Webpack

Webpack擁有很多其它的比較高級的功能（比如說本文后面會介紹的loaders和plugins），這些功能其實都可以通過命令行模式實現，但是正如前面提到的，這樣不太方便且容易出錯的，更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，我們可以把所有的與打包相關的信息放在里面。

繼續上面的例子來說明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名為webpack.config.js的文件，我們在其中寫入如下所示的簡單配置代碼，目前的配置主要涉及到的內容是入口文件路徑和打包后文件的存放路徑。

module.exports = {
 entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
 output: {
  path: __dirname + "/public",//打包后的文件存放的地方
  filename: "bundle.js"//打包后輸出文件的文件名
 }
}

注：“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

有了這個配置之后，再打包文件，只需在終端里運行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會自動引用webpack.config.js文件中的配置選項，示例如下：

webpack

又學會了一種使用Webpack的方法，這種方法不用管那煩人的命令行參數，有沒有感覺很爽。如果我們可以連webpack(非全局安裝需使用node_modules/.bin/webpack)這條命令都可以不用，那種感覺會不會更爽~，繼續看下文。

更快捷的執行打包任務

在命令行中輸入命令需要代碼類似于node_modules/.bin/webpack這樣的路徑其實是比較煩人的，不過值得慶幸的是npm可以引導任務執行，對npm進行配置后可以在命令行中使用簡單的npm start命令來替代上面略微繁瑣的命令。在package.json中對scripts對象進行相關設置即可，設置方法如下。

{
 "name": "webpack-sample-project",
 "version": "1.0.0",
 "description": "Sample webpack project",
 "scripts": {
  "start": "webpack" // 修改的是這里，JSON文件不支持注釋，引用時請清除
 },
 "author": "zhang",
 "license": "ISC",
 "devDependencies": {
  "webpack": "3.10.0"
 }
}

注：package.json中的script會安裝一定順序尋找命令對應位置，本地的node_modules/.bin路徑就在這個尋找清單中，所以無論是全局還是局部安裝的Webpack，你都不需要寫前面那指明詳細的路徑了。

npm的start命令是一個特殊的腳本名稱，其特殊性表現在，在命令行中使用npm start就可以執行其對于的命令，如果對應的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}如npm run build，我們在命令行中輸入npm start試試，輸出結果如下：

webpack

現在只需要使用npm start就可以打包文件了，有沒有覺得webpack也不過如此嘛，不過不要太小瞧webpack，要充分發揮其強大的功能我們需要修改配置文件的其它選項，一項項來看。

Webpack的強大功能

生成Source Maps（使調試更容易）

開發總是離不開調試，方便的調試能極大的提高開發效率，不過有時候通過打包后的文件，你是不容易找到出錯了的地方，對應的你寫的代碼的位置的，Source Maps就是來幫我們解決這個問題的。

通過簡單的配置，webpack就可以在打包時為我們生成的source maps，這為我們提供了一種對應編譯文件和源文件的方法，使得編譯后的代碼可讀性更高，也更容易調試。

在

webpack的配置文件中配置source maps，需要配置學習webpack，看完這篇文章就夠了
網頁網址：http://vcdvsql.cn/news49/105299.html

成都網站建設公司_創新互聯，為您提供建站公司、移動網站建設、微信公眾號、網站制作、響應式網站、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯