小白學(xué)webpack

大家好，我是狗蛋~
平時寫項目都是用腳手架，對于webpack真的是一概不知~
前幾天在慕課學(xué)習(xí)《webpack深入與實戰(zhàn)》，發(fā)現(xiàn)這個真的的從零開始學(xué)習(xí)，而且是1.X版本的webpack，很適合我這種小白，因為我是最近學(xué)習(xí)，所以用的是4.6版本的，所以我會用4.6的版本翻轉(zhuǎn)。
我會把作者的描述寫進來，該篇就當做是視頻的筆記版與我的遇坑記錄。

webpack是給js的打包工具，可以把很多的模塊打包成很少的一些靜態(tài)文件，它有自己的一個特性——代碼分割（Code Splitting），代碼分割可以使項目加載過程中只去當時需要的那部分文件，webpack整個工具里面有一個loader的概念，模塊可以通過loader去處理各種各樣的文件，無論文件是commonjs還是AMD還是es6，模塊化方式寫的，都可以通過loader處理，甚至可以處理css文件、圖片文件、js文件、coffeescript文件，less文件，甚至自定義文件（.vue，.jsx）

2018.04.20更新。
找到一篇webpack2.X的與視頻內(nèi)容類似的文章
webpack實用配置

接下來在demo01文件夾操作

npm init    // 初始化npm
npm install webpack -D    // 本地安裝webpack

新建一個hello.js

function hello(str){
    alert(str);
}

然后打包hello.js

webpack hello.js hello.bundle.js  // hello.js要打包的文件  hello.bundle.js打包后生成的文件

突發(fā)情況：這里打包我出了問題，他說我'webpack' 不是內(nèi)部或外部命令
百度了一下，webpack不是內(nèi)部命令有兩種解決方法

  1. 先全局安裝，再在自己工作目錄安裝使用（不推薦）
  2. 在package.json中添加script，就可以用npm run name執(zhí)行webpack命令了，name可以任?。ㄍ扑]）

所以我在package.json的script屬性加了一行"start": "webpack"，然后命令行輸入npm run start，然后爆問題。

在webpack 3中，webpack本身和CLI都在同一個包中，但是在版本4中，他們將兩者分開來更好地管理它們。

所以我要say yes，本地裝webpack-cli，裝好之后又報問題，黃色警告是要在語句中加模式，如圖我寫的。至于紅色的字，算了，加配置文件吧！



webpack.config.js

module.exports = {
    entry: './hello.js',
    output: {
        filename: 'bundle.js'
    }
}

然后運行npm run start，成功了

打包成功之后會給出信息
Hash: 本次打包哈希值
Version: webpack版本
Time: 本次打包所花時間
Asset: 生成的文件
Size: 生成的文件大小
Chunks: 這次打包的分塊
Chunk Names: 這次打包的塊名稱
在生成的dist文件夾中的bundle.js打開，拉到最下面可以看到我們寫的hello.js的東西，變樣了，哈哈哈


demo02新開一個文件夾，使hello.js引用別的js文件

新建一個world.js

function world(){
    return {}
}

在hello.js引用world.js

require('./world.js');
function hello(str){
    alert(str);
}

然后運行npm run start，成功了


生成dist/bundle.js中自己寫的代碼

并沒有視頻中說的[0]，[1]模塊表示出來....

demo03 webpack怎么處理css文件

不要覺得奇怪，演示而已，你就當做歷史過程吧。。。
新建一個style.css

body {
    background: lightskyblue;
}

在hello.js引用style.css

require('./world.js');
require('./style.css');
function hello(str){
    alert(str);
}

然后運行npm run start，按照視頻所說的，會報錯，好的，如愿報錯~


你需要一個適當?shù)膌oader處理css文件，好的，在目錄下（本地）安裝這個loader

npm install css-loader style-loader -D

并且給相應(yīng)的文件指定的loader require('css-loader!./style.css'); 全部代碼如下：

// hello.js
require('./world.js');
require('css-loader!./style.css');
function hello(str){
    alert(str);
}

然后運行npm run start，成功~

生成dist/bundle.js中自己寫的代碼

demo04創(chuàng)建一個index.html更直觀的看到css的效果

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack test</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>    // 這里因為我們是另外新建的html來引入生成后的js，所以是雙擊打開html文件查看效果
</body>
</html>

hello.js

require('./world.js');
require('css-loader!./style.css');
function hello(str){
    alert(str);
}
hello('hello world!');

然后npm run start，成功~雙擊打開html文件查看效果

alert效果出來了，但是css沒有效果

少了style-loader處理文件了，css-loader是處理css文件，style-loader是處理css-loader處理完的文件，新建style標簽插入html文件。所以，要改一下

// hello.js
require('./world.js');
require('style-loader!css-loader!./style.css');
function hello(str){
    alert(str);
}
hello('hello world!');

然后npm run start，成功~


除了在文件中引用css時，加入loader，也可以在命令行加入loader，但是真正開發(fā)不會這樣做的，我這里就不演示了....

明晚或后晚再演示一整個小項目那種~
2018.04.21 更~

demo05 建立項目

在demo05文件夾中創(chuàng)建文件夾，然后初始化npm，本地安裝webpack、webpack-cli，項目標配~

npm init
npm install webpack webpack-cli -D

新建文件夾src（放代碼）、dist（放打包后生成文件）以及初始化頁面index.html
再在src文件夾中創(chuàng)建script（放腳本）與style（放樣式）文件夾
創(chuàng)建webpack.config.js

我們之所以在項目下建立一個webpack配置文件是因為我們直接使用webpack命令，webpack會在根目錄下直接找到webpack.config.js，把它當做默認配置去運行

編輯webpack.config.js

module.exports = {  // commonjs的模塊化輸出
    entry: './src/script/main.js',      // 打包入口從哪開始  相對路徑
    output: {   // 打包以后的文件放什么地方
        path: __dirname + '/dist/js',    // 之前定義好的dist文件下的js文件夾  絕對路徑
        filename: 'bundle.js',   // 打包以后的文件名叫什么
    }
}

在script文件夾下新建main.js
編輯main.js

function helloworld(){}

在命令行輸入webpack

我這里出了點問題

那我在package.json里的script屬性寫命令了
編輯package.json，該文件不能有注釋

{
  "name": "demo05",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack --mode development",   // 沒有寫模式webpack4.6會出警告
    "build": "webpack --mode production"   // 沒有寫模式webpack4.6會出警告
  },
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}
執(zhí)行成功
在dist/js文件夾下可以看到bundle.js，還壓縮了

如果把webpack.config.js命名為webpack.dev.config.js，執(zhí)行的webpack命令是webpack --config webpack.dev.confit.js，因為默認的是webpack.config.js，否則會報錯。


視頻里講到webpack的命令參數(shù)，--progress顯示進度，--display-modules顯示打包模塊，--colors顯示信息有顏色，--display-reason打包原因，4.6版本除了沒有顯示進度，其他都沒什么效果。所以就不演示了。

在nodejs中也可以使用webpack，直接把webpack配置作為一個對象傳給webpack。日常中很可能用nodejs寫工具，在工具里面調(diào)用webpack，就會用到這種方式。這塊內(nèi)容后面會談到。

webpack.config.js配置講解
  1. entry
    webpack打包入口指示，有三種輸入方式來匹配不同需求
    • (1) string，指定一個入口文件，所有的依賴都在這個入口文件指定
    • (2) 數(shù)組，為了解決多個互不依賴的文件打包在一起，例如entry: ['./src/script/main.js','./src/script/a.js']
    • (3) 對象，key表示chunk name，value表示真的的一個入口，value既可以是string，也可以是數(shù)組。使用場景是在多頁面應(yīng)用，根據(jù)page1、page2給不同頁面不同的chunk，page1入口是main.js，page2入口是a.js。例如： 
      entry: {
         "page1": './src/script/main.js',
         "page2": ['./src/script/a.js'],      // 打包入口從哪開始  相對路徑
}
  2. output
    官網(wǎng)中指明不要在filename中使用絕對路徑，因為path會真正指定路徑。如果entry是單文件，那么filename就是可以寫死，如bundle.js。如果entry是多入口，filename還是寫死一個文件，那會造成覆蓋，只生成一個文件。所以需要占位符保證輸出是唯一的，如[name]表示chunkname，entry表示作為對象時的key、[hash]是這次打包的hash、[chunkhash]是每一個chunk的hash。demo06作為該例子。 
    // webpack.config.js
module.exports = {  // commonjs的模塊化輸出
    entry: {
        "main": './src/script/main.js',
        "a": ['./src/script/a.js'],      // 打包入口從哪開始  相對路徑
    },
    output: {   // 打包以后的文件放什么地方
        path: __dirname + '/dist/js',    // 之前定義好的dist文件下的js文件夾  絕對路徑
        filename: '[name].[hash:6].js',   // 打包以后的文件名叫什么
    }
}

demo07 自動化生成項目中的html頁面

我們打包之后的js要在html里引用，但是我們不可能每次打包就手動改一次，為解決這個問題，我們可以使用html-webpack-plugin插件。
本地安裝插件npm install html-webpack-plugin -D
這個插件的介紹，也有中文的詳細介紹

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容