webpack基礎及簡單應用

Webpack介紹及使用

1、什麼是webpack

Webpack 擴展了CommonJs的require的想法，彌補了requireJS在模塊化方面的缺陷,擁有強大的JS模塊化的功能，好比你想在 CoffeeScript、Sass、Markdown 或者其餘什麼代碼中require 你想要的任何代碼的話？那麼 Webpack 正是作這方面的工做。它會經過配置來取出代碼中的依賴，而後把他們經過加載器把代碼兼容地輸出到靜態資源中。 所以我理解的Webpack，就是一個出色的前端自動化構建工具、模塊化工具、靜態資源打包工具。

2、爲何要用webpack
如今不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法
a:模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
b:相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能能裝換爲JavaScript文件使瀏覽器能夠識別；
c:scss，less等CSS預處理器
這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是反鎖的，

3、webpack的工做方式及目標
Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。
Webpack的目標是：
一、將依賴關係樹分解爲按需加載的大塊；
二、保持初始加載時間低；
三、每一個靜態資產都應該是一個模塊；
四、將第三方庫集成爲模塊的能力；
五、可以定製模塊捆綁器的幾乎每一個部分；
六、適合大項目；

4、Webpack的四個核心概念
一、入口(Entry)
webpack 將建立全部應用程序的依賴關係圖表。圖表的起點被稱之爲入口起點。入口起點告訴 webpack 從哪裏開始，並遵循着依賴關係圖表知道要打包什麼。
二、出口(Output)
將全部的資源歸攏在一塊兒後，咱們還須要告訴 webpack 在哪裏打包咱們的應用程序;webpack 的output屬性描述瞭如何處理歸攏在一塊兒的代碼。

三、加載器(Loader)
webpack 的目標是，讓 webpack 聚焦於項目中的全部資源，而瀏覽器不須要關注考慮這些（這並不意味着資源(asset)都必須打包在一塊兒）。webpack 把每一個文件(.css, .html, .scss, .jpg, etc.) 都做爲模塊處理。並且 webpack 只理解 JavaScript。webpack loader 會將這些文件轉換爲模塊，而轉換後的文件會被添加到依賴圖表中。

四、插件(Plugins)
插件（Plugins）是用來拓展webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。
Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西：Loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個;插件並不直接操做單個文件，它直接對整個構建過程其做用。
webpack有不少內置插件，同時也有不少第三方插件，可讓咱們完成更加豐富的功能。

5、如何使用webpack
在開始以前，你須要把你的 Node.js 和 NPM 都更新到最新的版本。咱們將會使用 NPM 安裝一些工具。
開始使用 Webpack 很是簡單，我會展現給你看使用它的一個簡單的項目。第一步，爲你的項目新建一個文件夾，而後輸入 npm init，而後填寫相關問題。這樣會爲你建立了 package.json;
安裝 Webpack
接下來咱們安裝 Webpack，咱們要把它安裝在本地，而後把它做爲項目依賴保存下來。輸入 npm i webpack --save-dev。若是你想運行它，輸入 webpack便可
設置 Webpack
Webpack 的最基礎配置文件長這樣：

Webpack.config.js
var path = require('path');
module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'build.js'
  }
}

運行你的第一個編譯

如今咱們有了一個最簡單的配置，咱們須要有什麼東西去編譯，讓咱們開始一個經典的 Hello World
如今在你的命令行運行 webpack，而後你的應用會開始編譯，一個 index.html 文件就這樣出如今你的 /dist文件夾下，須要在 dist/ 下的 index.html 去啓動項目。
這個文件能夠用 html-webpack-plugin 來生成。使用它就只有一個配置的問題。通常來講使用 Webpack 來工做就是這麼個套路。

在接下來的章節中咱們會逐步介紹使用 Webpack 來構建項目來展現它的能力。

一、單個打包js到指定文件夾
Webpack.config.js配置

var path = require('path');
module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'build.js'
  }
}

目錄結構

入口文件app.js:

function hello (){
  const hello = 'helloWorld';
  return hello;
}

二、打包多個入口文件到指定文件夾

Webpack.config.js配置
var path = require('path');
module.exports = {
  entry: {
    a: './app.js',
    b: './bpp.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: '[name].js'
  }
}

目錄結構

三、打包css到指定文件夾中的js中
Webpack.config.js配置

var path = require('path');
module.exports = {
  entry: {
    bundle: './app.js',
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: '[name].js'
  },
  module:{
    loaders:[
     {test:/\.css$/,loader:'style-loader!css-loader' },
    ]
  }
}

css-loader 是處理css文件中的url()等，style-loader 將css插入到頁面的style標籤
目錄

四、打包index.html及單獨打包css文件
Webpack.config.js配置

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
Var ExtractTextPlugin=require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    bundle: './app.js',
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: '[name].js'
  },
  module:{
    loaders:[
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        })
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html'
    }),
    new ExtractTextPlugin('index.css')
  ]
}

html-webpack-plugin 它會自動幫你生成一個 html 文件，而且引用相關的 assets 文件(如 css, js)。
使用 extract-text-webpack-plugin就能夠把css從js中獨立抽離出來。

目錄

五、打包圖片資源
Webpack.config.js配置

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
Var ExtractTextPlugin=require
('extract-text-webpack-plugin');
module.exports = {
  entry: {
    bundle: './app.js',
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: '[name].js'
  },
  module:{
    loaders:[
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        })
      },
      {
　　　　　　test: /\.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　},
      {
          test: /\.(png|jpg|gif)$/,
          loader: 'url-loader?limit=8192&name=[hash:8].[name].[ext]'
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html'
    }),
    new ExtractTextPlugin('index.css')
  ]
}

使用file-loader 能夠打包css中url的圖片，主要用來處理圖片
url-loader是file-loader的增強版，可使用limit參數，通常限制小圖片轉 base64 能夠用 url-loader，其餘狀況都用 file-loader。
url-loader是對file-loader的上層封裝
html圖片問題用html-withimg-loader
入口文件app.js:

require('./index.css');
function hello (){
  const hello = 'helloWorld';
  return hello;
}
hello();

目錄

更多demo請移步https://github.com/Songzhiguo...