wepack的理解和深入

最近開始學習wepack，好像入門有點晚哈哈。

剛找到的一個學習wepack的api，感覺還不錯：奉上：http://www.jqhtml.com/7626.html，獻給剛入門的寶寶們。

下面這篇blog是copy來的，感覺寫的很贊呢，感謝作者大大的辛苦總結，作者和出處如下。

作者：閉眼賣布
鏈接：https://www.jianshu.com/p/7f121a84a474
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

接下來讓我們步入正題吧！

Webpack 是什麼呢？

官網介紹是 module bundler, JavaScript 的模塊打包器，參考題圖，大概意思就是，能夠將一堆關係錯綜複雜的 .js, .css, .sass 等文件，打包成幾個靜態的文件，在 html 裏面直接插入實用，就好像在一家淘寶店上買了許多東西，賣家不是一個一個給你發貨而是給你打包送過了，省去了你一個一個收快遞的麻煩。舉一個簡單的栗子，

//bar.js
export default function bar() {}

//app.js
import bar from './bar';
bar();

在使用 html 裏使用時，需要分別加載兩個文件 bar.js 和 app.js，通過 webpack 轉換成一個 bundle.js 之後，就只需要 <script src="bundle.js"></script> 這麼一個文件就可以了，對於一個有幾十個 js 文件的項目來說，簡直是不可多得。怎麼做到的？還是很懵逼？Webpack 有四個核心概念，接下來是一步一步的解釋。

碼

首先，確認電腦裏面已經安裝了 npm 和 node, 在 terminal 輸入 npm -v 和 node -v 可以查看，沒有的話隨便搜索都可以找到。然後我們就可以正式開始 webpack 之旅了。

安裝

新建一個文件夾，並進入文件夾

mkdir webpack-tut
cd webpack-tut

初始化

npm init 
/* 命個名，其他的都回車跳過
   name: (webpack-tut) webpack-starter
   version: (1.0.0)
   description: webpack-starter */

完成後文件夾裏有多出一個package.json文件，是整個項目的配置文件。

在該項目目錄下安裝 Webpack。如果是第一次安裝，也在全局環境下安裝。

npm i -D webpack
npm i -g webpack // 全局安裝

運行完後，會出現名爲 node_modules 的文件夾，裏面一堆的 library，這個文件夾就放着就行，不用去管它。
注意看一下 webpack 的版本，2017年4月8日還是2.3.3，如果版本過低可能會出現一些問題，可以選擇安裝某個版本

npm i -D webpack@<version> //e.g. npm i -D webpack@2.3.3

創建第一個 webpack 應用

新建兩個文件夾 src，dist。打包前的文件放在 src 裏，文件會自動打包後放在 dist 裏。

mkdir src
mkdir dist

在根目錄裏新建文件 webpack.config.js，並在 src 裏新建文件 app.js，兩個文件的代碼如下：

// app.js
console.log('Hello world');

// webpack.config.js
module.exports = {
    entry: './src/app.js',
    output: {
        filename: './dist/app.bundle.js'
    }
}

在根目錄下運行webpack：

webpack -d

就能看到一個 app.bundle.js 的文件自動生成在了 dist 文件夾裏。在文件末尾，可以看到

/*!********************!*\
  !*** ./src/app.js ***!
  \********************/
/***/ (function(module, exports) {
eval("console.log('Hello');\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9hcHAuanM/N2FjOSJdLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxvZygnSGVsbG8nKTtcblxuXG5cbi8vLy8vLy8vLy8vLy8vLy8vL1xuLy8gV0VCUEFDSyBGT09URVJcbi8vIC4vc3JjL2FwcC5qc1xuLy8gbW9kdWxlIGlkID0gMFxuLy8gbW9kdWxlIGNodW5rcyA9IDAiXSwibWFwcGluZ3MiOiJBQUFBOyIsInNvdXJjZVJvb3QiOiIifQ==");
/***/ })

恭喜你已經成功的使用了一次 webpack。

先講上面過程涉及的 Webpack 裏兩個核心的概念 entry（入口）和 output（輸出），entry 是初始文件的路徑，output 是自動生成後的文件路徑和文件名。

將文件自動插入 HTML 中

初步使用

首先安裝 html-webpack-plugin

npm install html-webpack-plugin --save-dev

修改文件 webpack.config.js，在 output 里加入路徑，並加入 plugins

// webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: './dist/app.bundle.js'
    },
    plugins: [new HtmlWebpackPlugin()]
}

運行 webpack -d, 自動生成了 index.html，並且自動把打包後的文件 app.bundle.js 加到了裏面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script></body>
</html>

自定義

html-wepack-plugin 允許我們能夠自定義一些內容，比如說使用固定的模版。接下來講下如何用固定的 html 模版去生成文件。首先修改 webpack.config.js

// webpack.config.js
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Title From Config',
            hash: true,
            filename: 'index.html',
            template: './src/index.html'
        })
    ]
}

在 src 目錄下新建文件 index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <p>You are awesome.</p>
    </body>
</html>

運行 webpack -d, 結果生成的 index.html 爲：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title From Config</title>
    </head>
    <body>
        <p>Some contents here, some others</p>
    <script type="text/javascript" src="app.bundle.js?0b89768d13f4a86e6d19"></script></body>
</html>

使用了 src 文件夾下的 index.html 爲模版，傳遞了webpack.config.js 裏的 title 的值，並且對生成的 app.bundle.js 未見進行了 hash 處理。

更多關於 html-webpack-plugin 的配置，可以看看官方文檔：https://github.com/jantimon/html-webpack-plugin

這部分涉及到 webpack 另外一個核心概念：plugins。plugins 是 webpack 的支柱功能，擴展了 webpack 的功能。

載入 CSS

首先，還是要安裝一下相應的庫。

npm install css-loader --save-dev
npm install style-loader --save-dev

下一步就是進行 webpack 的配置，在 webpack.config.js 裏進行，修改後如下：

// webpack.config.js
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Title From Config',
            hash: true,
            filename: 'index.html',
            template: './src/index.html'
        })
    ]
}

在 src 目錄下，新建 app.css

// app.css
body {
    background-color: lightblue;
}

運行 webpack -d，雙擊打開 dist/index.html，背景是淺藍色的，但是 dist 文件夾裏沒有多處一個 app.css 的文件，那是因爲 css 文件在加載的過程中，被轉換打包到了 app.bundle.js 裏面了，在這之中起作用的就是 webpack 的最後一個核心概念，loaders（加載器）。loaders 的作用就是對資源文件進行轉換。

總結

通過基礎入門，和加載 HTML, CSS，將 Webpack 的四大核心概念講完啦：

entry 是初始文件的路徑
output 是自動生成後的文件路徑和文件名。
loaders 的作用是對資源文件進行轉換。
plugins 是 webpack 的支柱功能，擴展了 webpack 的功能。

全部文件代碼：

// package.json
{
  "name": "webpack-starter",
  "version": "1.0.0",
  "description": "webpack-starter",
  "main": "index.js",
  "scripts": {
    "dev": "wepack -d"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.2",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3"
  }
}


// webpack.config.js
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Title From Config',
            hash: true,
            filename: 'index.html',
            template: './src/index.html'
        })
    ]
}

// src/app.js
const css = require('./app.css');
console.log('Hello');

// src/app.css
body {
    background: lightblue;
}

// src/index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <p>Some contents here, some others</p>
    </body>
</html>

全文借鑑了視頻 Webpack 2 Tutorial by Ihatetomatoes
看完前幾個視頻並跟着做，大改要40分鐘到1小時。
看這篇的話可以快很多。

寫這種技術類的，各種粘代碼的真實耗時費力。感謝那些好好寫文檔的程序員們！

wepack的理解和深入

碼

安裝

創建第一個 webpack 應用

將文件自動插入 HTML 中

初步使用

自定義

載入 CSS

總結

標籤做橫向導航欄時中間有間距的原因和解決方案

面試中常見：Cookie&sessionStorage&localStorage的區別

vue相關知識點整理，vue面試題

冒泡事件和事件捕獲，事件流

easyui表格去右側留白和滾動條的方法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結