webpack 教科書式入門教程

時間 2019-11-06

標籤 webpack 教科書入門教程简体版

原文原文鏈接

Webpack4.x 教程

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

安裝

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

$ npm install webpack -g

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

$ npm init

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

$ npm install webpack --save-dev

安裝完成後，打開 package.json 將會看到以下代碼java

{
  "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"
  }
}

同時還能夠選擇，安裝不一樣的版本node

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

舉顆栗子

在項目目錄下建立入口文件 entry.jswebpack

vim entry.js

document.write("hello webpack!");

建立 index.htmlgit

vim index.html

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

Run一下github

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

若是成功，會顯示以下代碼web

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 說明已經成功第一步了npm

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/

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。