webpack學習（一）

時間 2019-11-18

標籤 webpack 學習简体版

原文原文鏈接

簡介html

webpack是一款前端資源模塊化管理和打包工具，它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過loader的轉換，任何形式的資源均可以視做模塊，好比Commonjs模塊、AMD模塊、CSS、圖片、JSON、Coffeescript、LESS等前端

文檔：webpackwebpack

單獨使用webpackgit

1、學習資源github

webpack是一款模塊加載器兼打包工具，它把各類資源，例如JS（含JSX）、ES六、樣式（含less/sass）、圖片等都做爲模塊來使用和處理web

其餘的學習資源npm

2、安裝sass

全局安裝less

$npm install webpack -g異步

3、配置

建立webpack.config.js它的做用

entry：配置入口文件的地址，能夠是單一入口，也能夠是多入口。
output：配置出口文件的地址，在webpack2.X版本後，支持多出口配置。
module：配置模塊，主要是解析CSS和圖片轉換壓縮等功能。
plugins：配置插件，根據你的須要配置不一樣功能的插件。
resolve：用來設置路徑指向

watch：監聽新文件有改動後執行打包

module.exports={
    //入口文件的配置項
    entry:{},
    //出口文件的配置項
    output:{
          path:"",
          filename:""    
    },
    //模塊：例如解讀CSS,圖片如何轉換，壓縮
    module:{
       loaders:[
         {test:/\.js$/,loader:""}
       ]
    },
    //插件，用於生產模版和各項功能
    plugins:[],
    //用來設置路徑指向
    resolve:{},
    //監聽新文件有改動後執行打包
    watch:true
}

4、webpack命令執行打包

//直接運行webpack.config.js來打包
$webpack

接下來用幾個例子演示它的使用

1.例子demo1

咱們首先來看一下使用webpack來實現打包：

咱們定義一個模塊show.js

exports.show = function() {
    document.write("<div>我是寫入的內容</div>")
}

並在main.js中引用

var module = require("./show");
module.show();

webpack.config.js中的配置

module.exports = {
    entry: './module/main.js', //入口文件的地址
    output: {
        filename: './js/bundle.js'  //出口文件的地址
    },
    watch: true    //設爲true監聽文件  改動是自動執行打包

接下來在dos中進入文件路徑，執行打包命令webpack進行打包（這裏要先全局安裝了webpack才能使用該命令打包（npm install webpack -g））

而後咱們看到目錄自動添加了js文件夾及bundle.js

bundle.js爲打包後的文件，咱們能夠在html中直接引用它而不用引用main.js和show.js，編寫index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="js/bundle.js"></script>  //直接引用bundle.js
</body>

</html>

打開頁面結果以下：

2.例子demo2

這裏使用一下webpack的插件。引入CommonsChunkPlugin，這個屬於webpack內置的一個插件，須要在當前目錄安裝webpack。

做用：用於提取多個入口文件的公共腳本部分

當前目錄下安裝webpack

設置webpack.config.js

//首先引入webpack和CommonsChunkPlugin插件
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var webpack = require("webpack");
module.exports = {
    entry: {
        bundle1: './module/page1.js',
        bundle2: './module/page2.js'
            //這裏page1.js和page2.js裏的公共部分會被放到下面的commons.js文件中
    },
    output: {
        filename: "./js/[name].js" //page1.js和page2.js不相同的部分就分別打包到bundle1.js和bundle2.js裏
    },
    plugins: [
        new CommonsChunkPlugin("commons") //公共的腳本文件放在commons.js裏
    ]
}

另外一種寫法

// var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var webpack = require("webpack");
module.exports = {
    entry: {
        bundle1: './module/page1.js',
        bundle2: './module/page2.js'
            //這裏page1.js和page2.js裏的公共部分會被放到下面的commons.js文件中
    },
    output: {
        filename: "./js/[name].js" //page1.js和page2.js不相同的部分就分別打包到bundle1.js和bundle2.js裏
    },
    plugins: [
        // new CommonsChunkPlugin("commons")
        new webpack.optimize.CommonsChunkPlugin("commons") //公共的腳本文件放在commons.js裏
    ]
}

咱們定義一個show.js模塊

exports.sum = function(a, b) {
    console.log(a + b); }

分別在page1.js和page2.js中引入show.js模塊

var show = require("./show");
alert(show.sum(5, 6));

var show = require("./show");
alert(show.sum(10, 10));

它們的相同部分 var show = require("./show"); 導入的show.js模塊會被打包到commons.js中

接下來在dos中進入文件路徑，執行打包命令webpack進行打包

打包後目錄以下，新增了bundle1.js，bundle2.js和commons.js文件

編寫index1.html和index2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index1</title>
    <script src="./js/commons.js"></script>
    <!-- 先引用公共部分common.js -->
    <script src="./js/bundle1.js"></script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>index2</title>

</head>

<body>

</body>

</html>

運行結果：

index1.html的

index2.html的

以上就是今天的學習內容