webpack 教科書式入門教程

13651657101 發布于2019-08-19 18:12 / 2160人閱讀

摘要：教程最近剛用完又來搗鼓搗鼓，這只是個簡單的新手入門教程不多說注意安裝前檢查的安裝目錄路徑是否存在空格，建議安裝在無空格文件夾目錄下。

Webpack4.x 教程

最近剛用完 gulp 又來搗鼓搗鼓 webpack ，這只是個簡單的新手入門教程...不多說；
注意：安裝webpack前檢查nodejs的安裝目錄路徑是否存在空格( Program Files (x86) )，建議安裝在無空格文件夾目錄下。

安裝

全局安裝（以管理員身份運行命令行）

$ npm install webpack -g

初始配置文件 package.json （一直回車，就會在項目目錄下生成該文件）

$ npm init

到項目目錄安裝，將 webpack 添加到 package.json

$ npm install webpack --save-dev

安裝完成后，打開 package.json 將會看到如下代碼

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.0"
  }
}

同時還可以選擇，安裝不同的版本

$ npm install webpack@1.2.x --save-dev

舉顆栗子

在項目目錄下創建入口文件 entry.js

vim entry.js

document.write("hello webpack!");

創建 index.html

vim index.html




    
    webpack

Run一下

$ webpack ./entry.js bundle.js --colors

如果成功，會顯示如下代碼

Version: webpack 1.13.0
Time: 34ms
    Asset     Size  Chunks             Chunk Names
bunble.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 33 bytes {0} [built]

接下來打開 index.html 如果頁面上顯示 hello webpack 說明已經成功第一步了

hello webpack

添加一個文件

vim content.js

module.exports = "這里是 content.js 的內容！";

更新一下 entry.js

document.write(require("./content.js"));

繼續Run一下

$ webpack ./entry.js bundle.js --colors

打開 index.html 將會看到

這里是 content.js 的內容！

打包CSS

安裝 css-loader , style-loader 模塊
其他模塊：http://webpack.github.io/docs...

.css 文件使用 style-loader 和 css-loader 來處理
.js 文件使用 jsx-loader 來編譯處理
.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理

$ npm install css-loader --save or $ npm install css-loader --save-dev

添加文件 style.css

vim css/style.css

body{
    font-size: 36px;
}

更新 entry.js

require("!style!css!./css/style.css");
document.write(require("./content.js"));

Run一下

$ webpack ./entry.js bundle.js --colors

加載器測試

更新 entry.js

- require("!style!css!./css/style.css");
+ require("./css/style.css");
document.write(require("./content.js"));

Run一下

$ webpack ./entry.js bundle.js --module-bind "css=style!css"

使用 webpack.config.js

每個項目下都必須配置有一個 webpack.config.js ，它的作用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它需要做什么。

vim webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /.css$/, loader: "style!css" }
        ]
    }
};

Now we can just run

$ webpack

webpack 命令會優先讀取項目中的 webpack.config.js 文件

一些參數

--progress 打印打包日志

--colors 帶顏色的日志

--watch 監控自動打包

-d 生成map映射文件

-p 壓縮混淆腳本

開發服務器

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

服務器可以自動生成和刷新，修改代碼保存后自動更新畫面

http://localhost:8080/webpack-dev-server/bundle

很棒的DEMO

我是寫完這個才發現這個教程的...不過不晚
傳送門：https://github.com/ruanyf/web...

Reference API

官網： http://webpack.github.io/
文檔： http://webpack.github.io/docs/

如有不正之處，歡迎指正。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79326.html

編程書單：十本Python編程語言的入門書籍

摘要：本文與大家分享一些編程語言的入門書籍，其中不乏經典。全書貫穿的主體是如何思考設計開發的方法，而具體的編程語言，只是提供一個具體場景方便介紹的媒介。入門入門容易理解而且讀起來幽默風趣，對于編程初學者和語言新手而言是理想的書籍。本文與大家分享一些Python編程語言的入門書籍，其中不乏經典。我在這里分享的，大部分是這些書的英文版，如果有中文版的我也加上了。有關書籍的介紹，大部分截取自是官...

desdik 2019-07-24 18:22 評論0 收藏0
如果想成為一名頂尖的前端，這份書單你一定要收藏！

摘要：其中負載均衡那一節，基本上是參考的權威指南負載均衡的內容。開發指南讀了一半，就是看這本書理解了的事件循環。哈哈創京東一本騙錢的書。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由騰訊IVWEB團隊發表于云+社區專欄作者：link 2014年一月以來，自己接觸web前端開發已經兩年多了，記錄一下自己前端學習路上看過的，以及道聽途說的一些書，基本上按照由淺入深來介紹...

callmewhy 2019-08-02 16:06 評論0 收藏0
如果想成為一名頂尖的前端，這份書單你一定要收藏！

摘要：其中負載均衡那一節，基本上是參考的權威指南負載均衡的內容。開發指南讀了一半，就是看這本書理解了的事件循環。哈哈創京東一本騙錢的書。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由騰訊IVWEB團隊發表于云+社區專欄作者：link 2014年一月以來，自己接觸web前端開發已經兩年多了，記錄一下自己前端學習路上看過的，以及道聽途說的一些書，基本上按照由淺入深來介紹...

Scliang 2019-08-23 12:01 評論0 收藏0
如果想成為一名頂尖的前端，這份書單你一定要收藏！

摘要：其中負載均衡那一節，基本上是參考的權威指南負載均衡的內容。開發指南讀了一半，就是看這本書理解了的事件循環。哈哈創京東一本騙錢的書。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由騰訊IVWEB團隊發表于云+社區專欄作者：link 2014年一月以來，自己接觸web前端開發已經兩年多了，記錄一下自己前端學習路上看過的，以及道聽途說的一些書，基本上按照由淺入深來介紹。...

233jl 2019-04-23 13:22 評論0 收藏0