webpack開發案例（一）

阿新 • • 發佈：2017-12-21

sele tle 參數說明 logs css 直接 [] ima -128

案例一（基本打包）

基本前置條件

技術分享圖片

步驟一：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="text" id="v1" /> +
    <input type="text" id="v2" />
    <input type="button" id="bt" value="=" /> 

    <input type="text" id="res" />

    <script src="被打包的文件"></script>
  </body>
</html>

步驟二：

calc.js

// 1.0定義add方法
function add(x, y) {
  return x + y;
}

// 2.0導出add方法
module.exports = add;

步驟三：

main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
 
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法並且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  var add = require(‘./calc.js‘);
  res.value = add(v1value, v2value);
}

步驟四：

技術分享圖片

案例二（使用webpack.config.js配置）

基本前置條件

技術分享圖片

與案例一相比，index.htm（js文件引入路徑要改變）、calc.js和main.js內容不變，僅僅只是多了個webpack.config.js配置文件，並且改變相關文件的路徑

webpack.config.js

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //輸出路徑
    filename: ‘build.js‘ //輸出文件名
  }
}

這次打包方便了很多，直接輸入webpack即可

技術分享圖片

案例三（webpack中的loader）

步驟一：創建package.json文件

技術分享圖片

步驟二：安裝css-loader和style-loader到項目中，同時將其配置到package.json

技術分享圖片

此時package.json文件的內容為

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.1"
  }
}

步驟三：創建一個靜態文件，存放css

技術分享圖片

步驟四：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //輸出路徑
    filename: ‘build.js‘ //輸出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ‘style-loader!css-loader‘
    }]
  }
}

main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//導入css文件
require(‘../static/css/site.css‘)

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法並且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  var add = require(‘./calc.js‘);
  res.value = add(v1value, v2value);
}

步驟五：使用命令打包、發布文件

技術分享圖片

最終目錄結構

技術分享圖片

案例四（打包sass）

步驟一：安裝nodesass

cnpm install node-sass sass-loader style-loader --save-dev

技術分享圖片

步驟二：創建一個scss文件

技術分享圖片

$color:blue;
#v2 {
    border: 1px solid $color;
}

步驟三：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //輸出路徑
    filename: ‘build.js‘ //輸出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,  //打包.css文件
      loader: ‘style-loader!css-loader‘
    },
    {
      test: /\.scss$/,  //打包.scss文件
      loader: ‘style-loader!css-loader!sass-loader‘
    }]
  }
}

main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//導入css文件
require(‘../static/css/site.css‘);
//導入scss文件
require(‘../static/scss/site1.scss‘);

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法並且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  var add = require(‘./calc.js‘);
  res.value = add(v1value, v2value);
}

步驟四：使用命令打包、發布文件

技術分享圖片

package.json文件內容為

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1"
  }
}

案例五（打包less）

步驟一：安裝less-loader

技術分享圖片

步驟二：創建一個less文件

技術分享圖片

@color: green;
#res {
    border: 2px solid @color;
}

步驟三：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //輸出路徑
    filename: ‘build.js‘ //輸出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,  //打包.css文件
      loader: ‘style-loader!css-loader‘
    },
    {
      test: /\.scss$/,  //打包.scss文件
      loader: ‘style-loader!css-loader!sass-loader‘
    },
    {
      test: /\.less$/,  //打包.less文件
      loader: ‘style-loader!css-loader!less-loader‘
    }]
  }
}

main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//導入css文件
require(‘../static/css/site.css‘);
//導入scss文件
require(‘../static/scss/site1.scss‘);
//導入less文件
require(‘../static/less/site2.less‘);

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法並且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  var add = require(‘./calc.js‘);
  res.value = add(v1value, v2value);
}

步驟四：使用命令打包、發布

技術分享圖片

package.json文件內容

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1"
  }
}

案例六（打包其他資源）

步驟一：安裝url-loader和file-loader

cnpm install url-loader file-loader --save-dev（需要在管理員權限下安裝）

技術分享圖片

步驟二：配置webpack.config.js文件

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //輸出路徑
    filename: ‘build.js‘ //輸出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: ‘style-loader!css-loader‘
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: ‘style-loader!css-loader!sass-loader‘
      },
      {
        test: /\.less$/, //打包.less文件
        loader: ‘style-loader!css-loader!less-loader‘
      },
      {
        //註意url可能請求多個資源，所以將來在項目中通過url導入的
        //資源必須配置在這裏
        test: /\.(png|jpg|gif|ttf)$/, //打包url()請求的資源文件
        //如果圖片很大的話，那麽會造成build.js也比較大，加載的時候
        //導致效率低下。因此使用limit限制圖片大小，當圖片大小<40k，
        //則把它當做base64字符串存儲到build.js中
        //否則單獨將圖片存放到磁盤上，將路徑打包僅build.js中
        loader: ‘url-loader?limit=40000‘
      }
    ]
  }
}

步驟三：在html文件創建一個區域，在css、less或者scss中為那個區域添加一張圖片

#v1 {
  border: 1px solid red;
}

#bg {
  width: 300px;
  height: 100px;
  background: url(../../img/bg.jpg);
}

步驟四：步驟四：使用命令打包、發布

技術分享圖片

案例七（實現實時更新熱操作）

步驟一：安裝服務cnpm install webpack webpack-dev-server html-webpack-plugin --save-dev

技術分享圖片

步驟二：配置package.json

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
        "dev":"webpack-dev-server --inline --hot --open --port 5008"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

參數說明：
--inline 自動刷新
--hot 熱加載
--port 指定監聽端口
--open 自動在默認瀏覽器中打開
--host 可以指定服務器的if

步驟三：配置webpack.config.js文件

var htmlwp = require(‘html-webpack-plugin‘);

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //輸出路徑
    filename: ‘build.js‘ //輸出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: ‘style-loader!css-loader‘
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: ‘style-loader!css-loader!sass-loader‘
      },
      {
        test: /\.less$/, //打包.less文件
        loader: ‘style-loader!css-loader!less-loader‘
      },
      {
        //註意url可能請求多個資源，所以將來在項目中通過url導入的
        //資源必須配置在這裏
        test: /\.(png|jpg|gif|ttf)$/, //打包url()請求的資源文件
        //如果圖片很大的話，那麽會造成build.js也比較大，加載的時候
        //導致效率低下。因此使用limit限制圖片大小，當圖片大小<40k，
        //則把它當做base64字符串存儲到build.js中
        //否則單獨將圖片存放到磁盤上，將路徑打包僅build.js中
        loader: ‘url-loader?limit=40000‘
      }
    ]
  },
  plugins: [
    new htmlwp({
      title: ‘首頁‘, //生成頁面標題
      filename: ‘index.html‘,
      template: ‘index.html‘
    })
  ]
}

步驟四：使用npm run dev運行項目

技術分享圖片

案例八（實現es6轉es5）

步驟一：安裝四個包

babel-core

babel-loader

babel-preset-es2015

babel-plugin-transform-runtime：這個包主要是打包.vue組件頁面中的es6語法需要

技術分享圖片

步驟二：配置webpack.config.js文件

var htmlwp = require(‘html-webpack-plugin‘);

module.exports = {
  entry: ‘./src/main.js‘, //指定打包的入口文件
  output: {
    path: __dirname + ‘/dist‘, //輸出路徑
    filename: ‘build.js‘ //輸出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: ‘style-loader!css-loader‘
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: ‘style-loader!css-loader!sass-loader‘
      },
      {
        test: /\.less$/, //打包.less文件
        loader: ‘style-loader!css-loader!less-loader‘
      },
      {
        //註意url可能請求多個資源，所以將來在項目中通過url導入的
        //資源必須配置在這裏
        test: /\.(png|jpg|gif|ttf)$/, //打包url()請求的資源文件
        //如果圖片很大的話，那麽會造成build.js也比較大，加載的時候
        //導致效率低下。因此使用limit限制圖片大小，當圖片大小<40k，
        //則把它當做base64字符串存儲到build.js中
        //否則單獨將圖片存放到磁盤上，將路徑打包僅build.js中
        loader: ‘url-loader?limit=40000‘
      },
      {
        //將當前項目中所有的.js文件都要進行es6轉es操作
        //node_modules除外
        test: /\.js$/, //打包.js文件
        loader: ‘babel-loader?presets[]=es2015‘,
        //node_modules中的所有.js文件不去轉換，提高打包性能
        exclude: /node_modules/
      }
    ]
  },
  //babel: {
  //presets: [‘es2015‘], //配置將es6語法轉換成es5語法
  //plugins: [‘transform-runtime‘] //為了解決打包.vue文件不報錯
  //},
  plugins: [
    new htmlwp({
      title: ‘首頁‘, //生成頁面標題
      filename: ‘index.html‘,
      template: ‘index.html‘
    })
  ]
}

步驟三：改變main.js和calc.js的語法

main.js

// 1.0獲取dom對象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//導入css文件
//require(‘../static/css/site.css‘);
//導入scss文件
//require(‘../static/scss/site1.scss‘);
//導入less文件
//require(‘../static/less/site2.less‘);

import ‘../static/css/site.css‘; //es6語法
import addObj from ‘./calc.js‘; //es6語法

bt.onclick = function() {
  // 2.0獲取calc.js中的add方法並且調用結果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0調用add方法
  //var add = require(‘./calc.js‘);
  res.value = addObj.add(v1value, v2value);
}

calc.js

// 1.0定義add方法
function add(x, y) {
  return x + y;
}

// 2.0導出add方法
//module.exports = add;

//es6語法
export default {
  add //es6語法，當屬性名稱和屬性值變量同名的時候可以只寫一個
}

步驟四：使用命令npm run dev運行項目

技術分享圖片

webpack開發案例（一）

sele tle 參數說明 logs css 直接 [] ima -128 案例一（基本打包）基本前置條件步驟一： <!DOCTYPE html> <html> <head> <meta charset="ut

webpack開發案例（二）

reat obj cli 其他 all eth account 負責 ror 基於webpack開發案例（一）進行開發案例一（利用webpack解析和打包.vue組件頁面）前置參考知識：vue項目中的每個頁面其實都是一個.vue的文件，這種文件，Vue稱之為組件頁面

搭建 webpack、react 開發環境（一）

基本介紹 Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源，它可以將多種靜態資源 JavaScript、css、less 等轉換成一個靜態檔案，減少了頁面的請求。 React

webpack基礎使用（一）

nbsp 文件的參數 aso 哈希安裝目錄 -- 變換 bpa 安裝webpack：0.在全局安裝webpack npm install webpack -g(如果不在全局裝一個webpack，局部的會不識別) 1.通過命令行進入項目安裝目錄，2.輸入npm i

學習 MeteoInfo二次開發教程（一）

mat 沒有組件資源管理 img 教程 layer 添加 bbs 來自氣象家園：http://bbs.06climate.com/forum.php?mod=viewthread&tid=6631 按照教程，沒有太大問題，有些是對c#操作不熟悉導致。 1.添加d

netty開發教程（一）

prot eventloop 操作公司大量 read readline 獲得 github Netty介紹 Netty is an asynchronous event-driven network application framework for

ios開發技巧（一）

nss sets pos 哪裏 tro size wid navi tran iOS的一些小技巧 TableView不顯示沒內容的Cell怎麽辦? 類似這樣的,我不想讓以下那些空的顯示. 非常easy. self.tableView.tableFoote

Cardboard虛擬現實開發初步（一）

sce hot tracking 發的 tle motion 減少 app ide Google Cardboard 虛擬現實眼鏡開發初步（一）虛擬現實技術簡單介紹不得不說這幾年虛擬現實技術逐漸火熱，伴隨著虛擬現實設備的價格迅速平民化，越來越

微信公眾平臺開發教程（一）微信公眾賬號註冊流程

身份證 logs 政府提交註意 bsp 訪問服務器定義 htm 具體的操作步驟 1、註冊公眾賬號註冊地址：http://mp.weixin.qq.com/ 1）首先需要郵箱註冊： 2）郵箱激活。郵箱將會收到激活郵件，點擊激活鏈接即可。 3）需要登記個人信息。這裏需

react入門之使用webpack搭配環境（一）

ges 名稱更新 2.0 ref gin 分配 res body react入門之搭配環境（一）如果你想直接上手開發，而跳過這些搭配環境的繁瑣過程，推薦你使用官方的create-react-app命令 npm install -g create-react-app

MySQL 開發技巧（一）

logs 增加 .cn str wid select es2017 使用 idt 一、SQL語句分類 DDL 數據定義語言 TPL 事務處理語言 DCL 數據控制語言 DML 數據操作語言 SELECT INSERT UPDATE DELETE 二、正確使用S

開發問題（一）在windows和linux端口占用問題

logs ets 情況 toc 端口占用所有註意 linu eclips 前言　　今天在MyEclipse中使用tomcat發現tomcat端口8080竟然被占用了，所以就找了一下解決辦法共參考！　　在網絡程序的調試過程中，經常發生一些出乎意料的事情，比如創建一

曼思數學教育開發進展（一）

別人有意義提高成功目標是不是科學家我們事情 2017年10月18日，曼斯數學教育在取得了成功過後，現在即將入駐成都地區，曼思數學教育以小學，初中，高中數學為自己核心業務競爭力，旨在解決各個類型學生在面對數學這門學科時候的煩惱，不管是基礎薄弱的學生，對數學恐懼

vue項目開發流程（一）

訪問 running you 命令 http nbsp div spa new vue的環境配置好之後，讓項目運行起來，一般是localhost:8080,如果是移動端，想在手機上查看效果，可以用電腦ip連接訪問 1.打開控制臺查看本機ip,輸入命令：ipconfig

新體能評定軟件開發總結（一）

自動更新 enc cti lis start apt 軟件開發 har 更新轉載請註明來源。加入新特性：對話框，NumberPicker，專項訓練入口界面，新兵、文職人員專欄，自動更新。總結問題： startActivityForResult(Intent

PythonWeb開發教程（一），開發之前需要準備什麽

服務操作數什麽 upload 進行數據 AR 安裝函數這個博客系列，主要是寫怎麽用python開發網站，web開發，一來加深自己的印象，溫故而知新，二來希望可以幫助到其他想學pythonWeb開發的朋友。什麽是web開發呢，其實就是開發一個網站了。那開發

vue 開發系列（一） vue 開發環境搭建

更新 AC .org 開發環境搭建執行命令 taobao AR reg 開發技術概要目前前端開發技術越來越像後臺開發了，有一站式的解決方案。 1.JS包的依賴管理像MAVEN。 2.JS代碼編譯打包。 3.組件式的開發。 vue 是一個前端的一站式的前

使用SDL開發IMGUI（一）

target sdl2 布局自動布局 png 十分 class 可能接受 Note:原教程來自http://iki.fi/sol/imgui/ 00 – 介紹 IMGUI全稱：Immediate Mode GUI。IMGUI不同於我們常見的RMGUI（MFC、QT、WP

webpack學習筆記（一）

chunk 編碼自動配置 ava 如果但是 col bash 進行　　webpack顧名思義是打包工具。當前編碼界，早已不再是最初的那種一個html引用一個css和一個js來完成所有的頁面渲染和處理的模式了，尤其是前端，更加偏向組件化模塊化，一個完整的頁面是由不知道多

shell腳本案例（一）批量創建用戶

shell 批量創建用戶 for linux 案例需求用shell腳本批量建立Linux用戶實現要求：創建用戶student1到student50,指定組為student組！而且每個用戶需要設定一個不同的密碼！實現腳本 #!/bin/bash grep ‘student‘ /etc/grou

webpack開發案例（一）

相關推薦