webpack簡單學習的入門教程

時間 2019-11-30

標籤 webpack 簡單學習入門教程简体版

原文原文鏈接

前言，若是按照官網的安裝辦法：css

npm install webpack -g

安裝的是最新版的，而後就莫名其妙的有問題（能夠安裝，但運行有問題）。我是小白，我也不知道具體緣由，因此我換成2.5.1版本就OK了，先用這個，學習學習再深刻。html

1、安裝node

1. 先安裝node.js (若是安裝了就跳過)。webpack

下載地址：http://nodejs.cn/download/web

2. win+R 輸入 cmd 打開命令行。npm

3. 1) 輸入 node -v 查看node.js版本跟確認node安裝好了；json

2) 輸入 npm -v 查看npm版本。服務器

4. 選一個盤，例如我選E盤，新建一個demo文件夾webpack-dev-server

5. 在cmd裏面輸入 e: 進入E盤， cd demo 進入demo文件夾學習

6. 輸入 npm init 初始化，一路回車，而後demo文件夾裏面就會多一個package.json文件。

7. 而後就開始全局安裝webpack，這裏安裝2.5.1版本，-g表示全局安裝：

npm install webpack@2.5.1 -g

8. 接着在demo文件夾下也安裝webpack，--save-dev 表示本地安裝：

npm install webpack@2.5.1 --save-dev

輸入 webpack - v 檢查webpack安裝好了沒：

看來是OK了，回到demo文件夾，如今裏面有一個 node_modules文件夾 + package.json + package-lock.json。

其它的不用管，就看package.json文件就好。

2、使用

1. 在demo文件夾下新建一個index.html文件，裏面代碼能夠這麼寫：

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

細心的童鞋會發現不是沒有bundle.js文件嗎，引入它幹嗎？對，等下就要用webpack給它生出來。

2. 再在demo文件夾下新建一個入口文件entry.js，就先寫這個：

// entry.js
document.write('hello word.')

3. 見證效果的時候到了，在cmd輸入 webpack entry.js bundle.js

出現這個，就說明編譯成功了，回到demo文件夾，就會發現多出了一個文件 bundle.js，就是咱們引入的JS文件了

第一個entry.js表示入口，第二個bundle.js表示輸出內容。

打開index.html就會看到 hello word.。

初步使用webpack成功，不過，用命令行這樣直接編譯不只容易出錯，還麻煩，因此推薦使用配置文件來編譯。

3、使用配置文件編譯

1. 在demo文件夾裏面新建一個js文件：webpack.config.js (爲何叫這個名字，由於這個是默認配置文件名稱)

2. 輸入以下代碼：

entry 表示入口文件路徑；

output 表示出口文件路徑：

__dirname 表示當前目錄下；
path 入口文件輸出路徑；
filename 輸出文件名稱；

var webpack = require('webpack')

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

3. 在cmd輸入 webpack ,能夠看到跟剛纔同樣的效果。

4、配置css文件

1.webpack默認只能處理JavaScript 模塊，想要處理其它類型的文件，例如css，就須要用到 loader 。

先按照須要的2個模塊 css-loader 跟 style-loader (warn信息不用理它，error錯誤信息就要解決)

npm install css-loader

npm install style-loader

2. 配置文件 webpack.config.js 修改

紅色字體爲加入的代碼

var webpack = require('webpack')

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

3. 在demo文件夾下新建一個style.css文件，寫個body{background-color:red}

4. 在 entry.js 文件加入這個代碼

require('./style.css')

5. 在cmd 上webpack一下

6. 打開index.js刷新，就看到紅色背景了，說明運行成功。

5、webpack還有另外一個重要的內容，就是插件。

1. 例如 BannerPlugin 插件，能夠在輸出的文件頭部添加註釋信息。

2. 在webpack.config.js文件裏面加入代碼：

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }, plugins: [ new webpack.BannerPlugin('This file is created by zhengshize') ]
}

3.webpack一下，刷新index頁面在bundle.js裏面最上方就能看到This file is created by zhengshize了（固然中文註釋內容也是能夠的）

6、每次都要去刷新頁面很繁瑣？用webpack-server-dev

1. 讓編譯的輸出內容帶有進度和顏色(跟使用webpack-server-dev無關，純屬爲了好看點)