webpack超簡易入門安裝

時間 2019-12-05

標籤 webpack 簡易入門安裝简体版

原文原文鏈接

webpack是當今很火的打包構建工具，包含了大部分主流html，css，圖片處理框架，能夠進行預編譯語言的處理，代碼的壓縮功能等等，廢話很少說，進入正題。css

您須要先學習/配置如下內容

nodejs安裝:http://www.runoob.com/nodejs/...
nodejs鏡像配置:http://cnodejs.org/topic/4f99...
node模塊化的文章:http://www.cnblogs.com/Leo_wl...html

ps : 爲各位大佬奉上github地址：https://github.com/YexChen/we...node

安裝webpack

基本環境配置

運行如下指令，初始化項目：webpack

npm init

以上安裝一路回車便可，接下來安裝全局和局部的webpack：
-g爲全局安裝，方便咱們用命令行指令，
-D爲在開發環境的安裝git

npm i -g webpack
npm i -D webpack

基本項目構建

接下來，開始構建咱們的項目吧，先建立幾個基本的文件:github

app.js
index.html
module.js

app.js--webpack運行的入口程序
index.html--本示例中的網頁文件
module.js--一個js模組web

修改入口程序

修改module.js爲：npm

export default function(){
  document.write("module.js has been modified");
}
在這裏，咱們經過export暴露了一個方法，在app.js裏面咱們會調用這個方法。

修改app.js爲:json

import module from "./module"

document.write("app.js has been add");

module();

app.js裏咱們經過import方法導入了module.js中的包,並把module做爲module.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="./dist/bundle.js"></script>
</body>
</html>

也只是調用了一下dist目錄下的bundle.js而已

咱們此時的目錄結構應該爲：

.
|-- app.js
|-- index.html
|-- module.js
|-- node_modules
|-- package-lock.json
`-- package.json

那麼，讓咱們運行一下吧，若是安裝了全局webpack的話咱們能夠運行：

webpack app.js dist/bundle.js

若是沒有全局webpack的話咱們能夠運行：

./node_modules/.bin/webpack app.js dist/bundle.js

執行完畢後打開index.html(雙擊),若是看到打印出內容爲

app.js has been addmodule.js has been modified

那麼恭喜你，第一步成功了

設置webpack配置文件

一直使用命令行很麻煩吧？webpack早就想到了這一點，webpack.config.js就是爲此而生的

讓咱們新建一個webpack.config.js文件，並設置內容爲：

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  }
}

entry : 文件入口
output : 輸出口

此時直接運行

webpack

或者

./node_modules/.bin/webpack

便可進行編譯

webpack-dev-server

使用webpack-dev-server進行實時監聽（監測代碼改動）會讓咱們的工做變得更加容易。

先安裝webpack-dev-server:

npm i -D webpack-dev-server

而後再回到咱們的webpack.config.js文件，增長devServer項:

devServer : {
    port : 3000,
    publicPath : "/dist/"
  }

改動後的文件爲：

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }
}

注意下publicPath爲靜態地址，由於在dist裏面咱們生成了一個bundle.js，因此須要加這個，讓文件能夠被訪問

好的，配置已經完成了，接下來咱們來運行一下

node_modules/.bin/webpack-dev-server

在瀏覽器中間訪問localhost:3000,便可看到效果。此時咱們的代碼已經被監聽，您能夠改一下app.js或者module.js中的內容，文件會實時響應與編譯。

webpack loader css樣式表

有時候，咱們須要加載樣式表，在webpack中如何加入呢？

在根目錄下建立index.css,修改內容以下：

html,body{
    background-color : yellowgreen
}

而後在app.js中添加以下代碼：

import "./index.css"

app.js如今是這樣的：

import module from "./module"
import "./index.css"

document.write("app.js has been addadsadas");

module();

而後打開網頁，是否是報錯啦？報錯就對啦

在js文件中怎麼能打開css文件呢？這時，就須要loader上場了

咱們安裝一下

npm i -D css-loader

安裝完之後，咱們還須要webpack知道咱們安裝了這個模塊：
修改webpack.config.js:

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  module : {
    loaders : [
      {
        test : /\.css$/,
        loader : "css-loader"
      }
    ]
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }
}

而後再編譯一下，如今錯誤消失了，可是文件好像並無出來，這是爲何呢？
咱們這裏雖然使用了css-loader，可是並無讓頁面用上去，因此如今還須要另一個loader：style-loader

npm i -D style-loader

而後修改webpack.config.js:

const path = require("path");

module.exports = {
  entry : "./app.js",
  output : {
    path : path.join(__dirname,"dist"),
    filename : "bundle.js"
  },
  module : {
    loaders : [
      {
        test : /\.css$/,
        loader : "style-loader!css-loader"
      }
    ]
  },
  devServer : {
    port : 3000,
    publicPath : "/dist/"
  }

}

你們可能注意到了，loader中導入了兩個loader，中間用！分割，webpack優先調用右邊的，因此先運行css-loader處理文件，再運行style-loader

如今再次編譯文件，看咱們的主頁背景是否是變成原諒色了呢？

後續關於資源壓縮和按需加載的內容正在更新

相關標籤/搜索

每日一句

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