小白上學のWebpack零基礎學習指導

時間 2019-12-05

標籤上學 webpack 零基礎學習指導简体版

原文原文鏈接

前言：css

本套教程是零基礎學打包工具webpack；
後面會結合gulp+webpack搞定全部你得需求；

閒談：html

百度搜了一下，雖然教程多，可是雜亂無章，實用的沒多少，都是匆匆了事，因此我就本身學了兩天，如今從最底層教你們完成webpack的經常使用功能，後期我會再寫一篇gulp+webpack的前端神器文章，但我也要學好了再給你們發^_^!

nodejs安裝：前端

1.https://nodejs.org/en/download/  選擇對應本身的下載安裝，命令行工具測試node -v是否成功；

smart-npm優化下載速度：node

2.安裝完node後再測試一些 npm -v 命令是否成功，因爲npm鏈接外網會常常下載插件會卡，推薦你們使用smart-npm；
在CMD命令窗口中輸入：npm install --global smart-npm@1 --registry=https://registry.npm.taobao.org/
安裝完成後會自動替換當前npm，這時候你再試試安裝其餘的插件是否是很快了^_^？！

webpack全局安裝：jquery

3.CMD命令窗口中輸入：npm install -g webpack

新建項目：webpack

4.新建文件夾命名爲webpack，若是你創建在D：test/webpack 在cmd命令窗口依次輸入d: 、cd test 、 cd webpack 如今咱們已經進入咱們新建的webpack文件夾輸入：

一直按回車；完成後如今項目裏面就有一個package.json，咱們多加一點東西；創建如下文件：es6

/app
  index.js
  pro.js
package.json
webpack.config.js

添加了兩個js文件，添加了最重要的webpack->webpack.config.js的配置文件(文件名字不能更改)，咱們仍是從簡單的hello world開始吧，webpack原生直接支持AMD和CommonJS兩種模塊；web

JS代碼ajax

pro.jsnpm

//咱們這裏使用CommonJS風格

function generateText() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world";
  return element;
}

module.exports = generateText;//module.exports這個函數會把generateText方法暴露給全局在其餘js中就能夠引用了, exports至關於導出，後面index.js中的require就是導入；

index.js

var pro  = require('./pro');//填寫模塊路徑，導入文件後綴的js能夠省略。
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(pro());
document.body.appendChild(app);

以上代碼功能很簡單，就是把pro.js定義爲一個模塊，在index.js中引用，最終兩文件中要添加的內容都顯示在index.html中。

配置Webpack

如今開始配置webpack，目標是把這兩個js文件合併成一個文件. 咱們能夠本身在build文件夾裏面手動建一個index.html文件夾，而後再把合併之後的js引用在裏面，可是這樣有些麻煩，因此咱們這裏安裝一個plugin，能夠自動快速的幫咱們生成HTML。

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

好有了這個插件開始寫webpack.config.js文件

var path = require('path');//node 引入自帶方法
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定義了一些文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);//__dirname是獲取當前文件的絕對路徑，注意雙下劃線
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  //項目的文件夾 能夠直接用文件夾名稱 默認會找index.js 也能夠肯定是哪一個文件名字
  entry: APP_PATH,
  //輸出的文件名 合併之後的js會命名爲bundle.js
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //添加咱們的插件 會自動生成一個html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
};

而後在項目根目錄運行

D:\test\webpack>webpack

終端顯示一堆信息，而後告訴你成功了。

你可使用webpack --help看看一些運行的時候可選的參數

你會發現多出來一個build文件夾，直接點開裏面的html文件，你會發現咱們可愛的「hello world」已經插入到頁面了。咱們的任務完成了，成功生成html，合併js，html引入了js，js被執行了。

配置webpack-dev-server

上面任務雖然完成了，可是咱們要不斷運行程序而後查看頁面，因此最好新建一個開發服務器，能夠serve咱們pack之後的代碼，而且當代碼更新的時候自動刷新瀏覽器。

安裝webpack-dev-server

npm install webpack-dev-server --save-dev

安裝完畢後在webpack.config.js中添加配置

module.exports = {
  ....
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  }
  ...
}

而後再package.json裏面配置一下運行的命令,npm支持自定義一些命令

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

好了，在項目根目錄下輸入npm start,一堆信息後server已經起來了，在瀏覽器裏面輸入http://localhost:8080 發現偉大的hello world出現了，在js裏面隨便修改一些輸出而後保存, 瀏覽器自動刷新，新的結果出現了。

添加CSS樣式

如今來添加一些樣式，webpack使用loader的方式來處理各類各樣的資源，好比說樣式文件，咱們須要兩種loader，css-loader 和 style－loader，css-loader會遍歷css文件，找到全部的url(...)而且處理。style-loader會把全部的樣式插入到你頁面的一個style標籤中。

安裝咱們的loader

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

配置loader，在webpack.config.js中

devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  ...
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css'],
        include: APP_PATH
      }
    ]
  },
  ...
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]

看loaders的書寫方式，test裏面包含一個正則，包含須要匹配的文件，loaders是一個數組，包含要處理這些程序的loaders，這裏咱們用了css和style，注意loaders的處理順序是從右到左的，這裏就是先運行css-loader而後是style-loader.

新建一個樣式文件 main.css

h1 {
    color: red;
}

記得在入口文件index.js中引用

require('./main.css');

而後發現標題變成紅色的了，webpack的理念是基於項目處理的，把對應的文件格式給對應的loader處理，而後你就不用管了，它會決定怎麼壓縮，編譯。

那如今想使用一些有愛的css預編譯程序，來點sass吧。你可能已經想到了，再來個loader就行啦，確實是這樣簡單。

npm install sass-loader --save-dev

稍微修改一下webpack.config.js，刪掉咱們先前添加的css規則，加上下面的loader

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass'],
    include: APP_PATH
  },

添加兩個sass文件，variables.scss和main.scss

variables.scss

$red: red;

main.scss

@import "./variables.scss";

h1 {
  color: $red;
}

在index.js中引用

require('./main.scss');

而後發現標題如願變紅，至關簡單吧。

處理圖片和其餘靜態文件

這個和其餘同樣，也許你也已經會玩了。安裝loader，處理文件。諸如圖片，字體等等，不過有個神奇的地方它能夠根據你的需求將一些圖片自動轉成base64編碼的，爲你減輕不少的網絡請求。

安裝url-loader

npm install url-loader --save-dev

配置config文件

{
    test: /\.(png|jpg)$/,
    loader: 'url?limit=40000'
  }

注意後面那個limit的參數，當你圖片大小小於這個限制的時候，會自動啓用base64編碼圖片。

下面舉個栗子。

新建一個imgs文件夾，往裏面添加一張崔叔的照片。在scss文件中添加以下的東西。

@import "./variables.scss";

h1 {
  color: $red;
  background: url('./imgs/avatar.jpg');
}

npm start, 而後查看圖片的url，用瀏覽器審查元素看到生成了best64位碼的圖片編碼，建議一些圖標什麼的用此功能。
添加第三方庫

有的時候還想來點jquery，moment，undersocre之類的庫，webpack能夠很是容易的作到這一點，有謠言說Bower即將中止開發了, 做者推薦都使用npm來管理依賴。那麼咱們如今安裝在咱們的app中添加jquery和moment的支持。

npm install jquery --save-dev

在js中引用

var pro = require('./pro');
var $ = require('jquery');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(pro());
$('body').append('<p>look at me! now is ' + new Date() + '</p>');

看看瀏覽器，成功！ jquery如今都起做用了！

開發技巧

啓用source-map

如今的代碼是合併之後的代碼，不利於排錯和定位，只須要在webpack.config.js中添加

...
  devtool: 'eval-source-map',
  ...

這樣出錯之後就會採用source-map的形式直接顯示你出錯代碼的位置。

配置webpack-dev-server代理

一個典型的例子就是先後端分離。後端是的server無論用什麼寫的。假定在本機他是相似http://localhost:5000/api/*這類的請求，如今添加配置讓ajax請求能夠直接proxy過去。

devServer: {
    hot: true,
    inline: true,
    //其實很簡單的，只要配置這個參數就能夠了
    proxy: {
      '/api/*': {
          target: 'http://localhost:5000',
          secure: false
      }
    }
}

重啓之後發現/api/*的請求都代理到http://localhost:5000去了～
安裝jshint檢測js語法

npm install jshint-loader --save-dev

在config文件中配置

module: {
...
    //和loaders同樣的語法，很簡單
    perLoaders: [
        {
            test: /\.jsx?$/,
            include: APP_PATH,
            loader: 'jshint-loader'
        }
    ]
}

...
//配置jshint的選項，支持es6的校驗
jshint: {
  "esnext": true
},

好了如今每次npm run start的時候就能夠看到jshint的提示信息咯
有時某些插件都須要全文件使用例如：jquery
webpack提供一個插件把一個全局變量插入到全部的代碼中，在webpack.config.js裏面配置

...
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    }),
    //provide $, jQuery and window.jQuery to every script
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
  ...

分離app.js和第三方庫

如今咱們build出來的只有一個bundle.js 若是第三方庫不少的話，會形成這個文件很是大，減慢加載速度，如今咱們要把第三方庫和咱們app自己的代碼分紅兩個文件。

修改entry入口文件

entry: {
    app: path.resolve(APP_PATH, 'index.js'),
    //添加要打包在vendors裏面的庫
    vendors: ['jquery', 'moment']
  },

添加CommonsChunkPlugin

plugins: [
    //這個使用uglifyJs壓縮你的js代碼
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    //把入口文件裏面的數組打包成verdors.js
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]

添加完畢運行npm run build
在build文件夾中發現以下結構

budle.jsindex.htmlvendors.js