webpack入門--前端必備

時間 2019-11-13

標籤 webpack 入門前端必備简体版

原文原文鏈接

webpack入門--前端必備

什麼是 webpack？

webpack是一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都做爲模塊來使用和處理。咱們能夠直接使用 require(XXX) 的形式來引入各模塊，即便它們可能須要通過編譯（好比JSX和sass），但這不用咱們理會，由於 webpack 有着各類健全的加載器（loader）在處理這些事情。css

爲何要使用 webpack？

很簡單的一個道理，難道寫react的同窗會不用它麼？html

安裝

首先你須要安裝有node(個人版本爲v5.4.1)，而後執行前端

$ npm install webpack -gnode

固然若是常規項目把依賴寫入 package.json 包更好：react

$ npm initwebpack

$ npm install webpack --save-devgit

咱們在項目的根目錄中的package.json 能夠看到：（其它包根據你的項目須要另外安裝）github

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "demo",
  "main": "main.js",
  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "RORO彥",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.6"
  },
  "devDependencies": {
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.11.0",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "jsx-loader": "^0.13.2",
    "node-libs-browser": "^1.0.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7"
  }
}

配置文件

建立咱們webpack的配置文件webpack.config.js：（這個文件須要手碼的哦）web

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    entry: "./main.js",
    output: {
        path: './build', // 圖片和 JS 會打包到這裏來
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },

            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }, // 用 ! 來鏈接多個 loader

            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            } // 內聯 base64 URLs, 限定 <=8k 的圖片, 其餘的用 URL

        ]
    },
    resolve: {
        extensions: ['', '.js', '.json', 'coffee']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]

}

對這個配置文件解釋下：express

1) entry：entry能夠是個字符串或數組或者是對象。指定打包的入口文件，一個鍵值對，就是一個入口文件

2) output：包結果文件的名稱,在這裏我指定它在./build的文件夾打包輸出

3) resolve：用於指明程序自動補全識別哪些後綴,
注意一下, extensions 第一個是空字符串! 對應不須要後綴的狀況.

4) module：以及一些正則。當須要加載的文件匹配test的正則時，就會調用後面的loader對文件進行處理，這正是webpack強大的緣由。

1.js的引用

好比這裏定義了凡是.js結尾的文件都是用babel-loader作處理，而.jsx結尾的文件會先通過jsx-loader處理，而後通過babel-loader處理。固然這些loader也須要經過npm install安裝

2.樣式及圖片的引用

require('./bootstrap.css'); require('./myapp.sass'); var img = document.createElement('img'); img.src = require('./glyph.png');

當你引用 CSS(或者 SASS 吧), Webpack 會將 CSS 內聯到 JavaScript 包當中, require() 會在頁面當中插入一個<style>標籤. 當你引入圖片, Webpack 在包當中插入對應圖片的 URL, 這個 URL 是由require()返回, 而圖片可能被轉化成 base64 格式的 dataUrl。可是注意，全部這些要在 webpack.config.js 文件寫好對應的 loader:

5) plugins: 這裏定義了須要使用的插件，

好比commonsPlugin在打包多個入口文件時會提取出公用的部分，生成common.js

這裏還配置了NoErrorsPlugin插件，用來跳過編譯時出錯的代碼並記錄，使編譯後運行時的包不會發生錯誤：固然Webpack還有不少其餘的配置，具體能夠參照它的配置文檔

準備

在項目的根目錄下新建一個index.html文件（如截圖），這個是入口文件中引入程序跑起來的一些必要的東西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="./build/bundle.js"></script>
</body>
</html>