webpack入門（1）

時間  2019-11-20
標籤 webpack 入門 简体版
原文   原文鏈接

webpack入門（1）

源碼戳這裏
ps：每一個案例對應相應的demo，例如「案例1」對應「demo1」javascript

1、webpack基本功能及簡單案例

  • 安裝webpack
    $ npm i webpack -gcss

  • 基本功能
    $ webpack -v 查看webpack版本號
    $ webpack 最基本的啓動webpack的方法
    $ webpack -w 提供watch方法；實時進行打包更新
    $ webpack -p 對打包後的文件進行壓縮
    $ webpack -d 提供source map，方便調式代碼
    $ webpack --display-error-details 顯示更多報錯信息
    $ webpack --config webpack.config2.js 使用另外一份配置文件webpack.config2.js來打包
    $ webpack --progress 顯示進度條
    $ webpack --color 添加顏色html



案例1

構建項目文件夾, 目錄以下java

[webpack]
  |-- src
    |-- index.js
    |-- index.less
    |-- index.html
  |-- package.json
  |-- webpack.config.js

webpack/src/index.html 內容以下jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
<script src='../build/app.js'></script>
</html>

webpack/src/index.less 內容以下webpack

body {
  background: yellow;
}

webpack/src/index.js 內容以下git

console.log(123)

運行 $ npm init , 入下圖所示es6

2

而後就看到webpack/package.json文件的內容, 以下github

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

配置 webpack.config.jsweb

webpack/webpack.config.js 文件的內容,以下

var webpack = require('webpack');
module.exports = {
  entry: './src/index.js', // 入口文件地址
  output: {
    filename: './build/app.js' // 輸出文件地址和名字
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  }
}

分析以下圖

5

安裝依賴

  • 安裝webpack依賴
    $ npm i webpack --save-dev
    $ npm i webpack@x.x.x --save-dev(安裝指定版本的webpack)

  • 安裝css依賴
    $ npm i css-loader --save-dev
    $ npm i style-loader --save-dev

  • 安裝less依賴
    $ npm i less --save-dev
    $ npm i less-loader --save-dev

  • 安裝es6依賴
    $ npm i babel-loader --save-dev
    $ npm i babel-preset-es2015 --save-dev
    $ npm i babel-core --save-dev

這個時候再看webpack/package.json文件，就會發現多了一部份內容，以下圖所示

7

運行 $ webpack , 會發現項目文件夾下多了一個文件 webpack/build/app.js , 以下圖所示

3

打開在瀏覽器打開 webpack/src/index.html ，會看到以下圖所示

4

這樣咱們已經有了一個簡單的案例，在入口文件index.js裏引入相關的依賴，而後經過webpack把他們打包好，並生成到build/app.js文件裏。在index.html裏只須要引入app.js文件，就可以看到背景色和console.log打印的值。

以下圖所示

6

webpack/package.json

{
    "name": "webpack",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
        "start": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^0.28.7",
        "less": "^2.7.3",
        "less-loader": "^4.0.5",
        "style-loader": "^0.19.0",
        "webpack": "^3.8.1"
    }
}

將webpack/build文件夾刪除，運行$ npm run start，也能生成webpack/build/app.js



2、簡單介紹下package.json中的devDependencies的版本號

  • 以devDependencies中，webapck的版本號爲例

    devDependencies的版本號寫法 安裝依賴的版本
    "webpack": "3.8.1" 等於3.8.1
    "webpack": "~3.8.1" 3.8.x，不會安裝3.9.x或者3.7.x
    "webpack": "^3.8.1" 3.x.x，不會安裝4.x.x或者2.x.x
    "webpack": ">3.8.1" 大於3.8.1
    "webpack": ">=3.8.1" 大於等於3.8.1
    "webpack": "<=3.8.1" 小於等於3.8.1



3、 webpack-dev-server

輕量級的服務器，能夠修改代碼後，在頁面上看到修改完的效果，詳細介紹戳這裏

安裝依賴
$ npm i webpack-dev-server -g
$ npm i webpack-dev-server --save-dev



案例2

ps:每一個案例都是基於前一個案例的內容改造，沒有提到的文件和前一個案例內容同樣

運行 $ webpack-dev-server , 以下圖
8

在瀏覽器打開鏈接 http://localhost:8080/src/ ，就能看到案例一的效果了

webpack/src/index.js

import './index.less';
const fn = () => {
  document.write('hi!')
}
fn();

這個時候在頁面可以實時更新，以下圖所示

9

改造 webpack/package.json

webpack/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

10

可選的參數

  • --content-base: 設定webpack-dev-server的director根目錄。若是不進行設定的話，默認是在當前目錄下。
  • --quiet: 控制檯中不輸出打包的信息，開發中通常設置爲false，進行 打印，這樣查看錯誤比較方面
  • --no-info: 不顯示任何信息
  • --colors: 對信息進行顏色輸出
  • --no-colors: 對信息不進行顏色輸出
  • --compress: 開啓gzip壓縮
  • --host : 設置ip
  • --port : 設置端口號，默認是:8080
  • --inline: webpack-dev-server會在你的webpack.config.js的入口配置文件中再添加一個入口,
  • --hot: 開發熱替換
  • --open: 啓動命令，自動打開瀏覽器
  • --history-api-fallback: 查看歷史url
  • 更多參數戳這裏

下面以「--port」舉例

webpack/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --port 7777",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

11

運行 $ npm run start

12

瀏覽器打開頁面 http://localhost:7777/src/ ，便可看效果

webpack-dev-server後寫多個參數：webpack-dev-server --hot --inline



4、output和entry

entry：入口文件，簡單說就是要打包的文件。

output: 出口文件，簡單說就是打包生成的文件。

entry有三種類型的值：字符串、數組、對象。案例一和案例二都是字符串的方式，下面來看下數組（案例三）和對象（案例四）的寫法



案例3 --- entry值爲數組的寫法，多個入口對一個出口

新增文件 webpack/src/main.js，以下圖

14

webpack/src/main.js

console.log('123')

webpack/webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: ['./src/index.js', './src/main.js'], // 入口文件地址
  output: {
    filename: './build/app.js' // 輸出文件地址和名字
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  }
}

運行 $ npm run build，index.js和main.js兩個文件最後生成一個webpack/build/app.js文件

運行 $ npm run start，打開 http://localhost:7777/src/ ，能夠看到兩個文件裏的代碼都生效了，以下圖所示

15



案例4 --- entry值爲對象的寫法，多個入口對多個出口

webpack/webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 輸出文件地址和名字
    filename: './build/[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  }
}

webpack/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
<script src='../build/app.js'></script>
<script src='../build/main.js'></script>
</html>

運行 $ npm run build，會生成webpack/build/app.js和webpack/build/main.js

13

將main.js也在index.html裏引入一下，就能看見和案例三同樣的效果



案例5 --- output的path和publicPath

webpack/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --content-base --inline --hot --port 7777",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

webpack-dev-server的配置參數，能夠去 案例2 的 可選的參數 裏去找

webpack/webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口文件
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js', // 文件名，name即爲entry的key
    publicPath: '/build' // 命令行模式下,必定要配置output.publicPath來指定編譯後的包(bundle)的訪問位置
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  }
}

__dirname：是一個全局變量，指當前執行腳本所在的目錄

path和publicPath的區別：戳這裏

運行 $ npm run build 和 $ npm run start (打開 http://localhost:7777/src/ ) 的效果和案例四同樣

[name]不必定必定要是文件名，也能夠是路徑：
filename: '[name]/min.js'
能夠本身運行下 $ webpack ， 看下生成的文件，這裏就不貼圖展現了

output裏filename有三個值：
· [name]是文件名字是entry的鍵值。
· [hash]是md5加密的值。
· [chunkhash]能夠做爲版本號使用。



5、html單獨打包

安裝依賴
$ npm install html-webpack-plugin --save-dev

可選的配置：

  • title : 用於生成的HTML文件的標題。
  • filename : 用於生成的HTML文件的名稱，默認是index.html。也能夠指定打包的目錄，下面案例7中有介紹。
  • template : 模板的路徑。支持加載器，例如 html!./index.html。模板類型能夠是html，jade，ejs，hbs等，注意要安裝對應的loader
  • inject : 注入選項，有四個值
    • true(默認，script標籤位於html文件的 body 底部)
    • ‘head’（script 標籤位於 head 標籤內）
    • ‘body’（同 true）
    • false（不插入生成的 js 文件，只是單純的生成一個 html 文件
  • favicon : 給定的圖標路徑，可將其添加到輸出html中。
  • minify : 值爲對象或者false，對 html 文件進行壓縮，false是默認選項，不壓縮。html-minifier詳細文檔戳這裏。
  • hash : true | false。若是是true，會給全部包含的script和css添加一個惟一的webpack編譯hash值，相似於咱們經常使用的時間戳。這對於緩存清除很是有用。
  • cache : true(默認) | false 。是否須要緩存，若是傳入true，只有在文件變化時才發送（emit）文件。
  • showErrors : true | false 。若是傳入true（默認），錯誤信息將寫入html頁面。
  • chunks : 主要是針對多入口(entry)文件，默認會在生成的 html 文件中引用全部的 js 文件，也能夠指定引入哪些js。
  • excludeChunks : 和chunks恰好相反，指定不須要引入的js。
  • chunksSortMode : 決定了 script 標籤的引用順序。有四個值
    • ‘auto’，默認，內置的排序方式
    • ‘none’，不排序
    • ‘dependency’，按照不一樣文件的依賴關係來排序
    • {function}，能夠指定具體排序規則
  • xhtml : 布爾值
    • false，默認
    • true，兼容 xhtml 的模式引用文件



案例6 --- html-webpack-plugin的基本用法

webpack/package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --content-base build --inline --hot --port 7777 ",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

webpack-dev-server --content-base
設定webpack-dev-server的director根目錄。若是不進行設定的話，默認是在當前目錄下。

webpack-dev-server --content-base build
將build目錄做爲根目錄。有一點須要注意的是，webpack-dev-server生成的包並無放在你的真實目錄中，而是放在了內存中。

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  },
  plugins: [new HtmlWebpackPlugin()]
}

16

運行 $ npm run build ，會發現html被單獨打包出來了webpack/build/index.html，以下圖所示

17

運行 $ npm run start，打開 http://localhost:7777/ ，就能看到效果。由於咱們默認打包後生成的html名就是index(主頁面文件)，因此這裏至關因而打開了 http://localhost:7777/index.html



案例7 --- html-webpack-plugin的title和filename

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  },
  plugins: [new HtmlWebpackPlugin({
      title: 'demo',
      filename: 'demo.html'
  })]
}

18

filename是設置打包好的html文件名，title是設置html的標題。

運行 $ npm run build， 會將html打包webpack/build/demo.html，且頁面標題爲demo，以下圖所示

19

運行 $ npm run start，打開 http://localhost:7777/demo.html 看頁面效果

filename其餘寫法：（下面介紹兩種，你們本身試一下）

  • filename: './dist/demo.html'。 則html會被打包成webpack/build/dist/demo.html
  • filename: __dirname + '/dist/demo.html'。 則html會被打包到webpack/dist/demo.html



案例8 --- html-webpack-plugin的template和chunks，生成多個html

新建文件 webpack/src/main.html，以下圖所示
20

webpack/src/main.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>main</title>
</head>
<body>

</body>
</html>

webpack/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>

</body>
</html>

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: "style-loader!css-loader"
      },
      {
        test: /\.less/, // less-loader
        loaders: 'style-loader!css-loader!less-loader'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'demo.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路徑
      chunks: ['app'] // 須要引入的js
    }),
    new HtmlWebpackPlugin({
      filename: 'main.html',
      template: './src/main.html',
      chunks: ['main']
    })
  ]
}

運行 $ npm run build，生成的文件以下所示
21

webpack/src/index.html打包生成webpack/build/demo.html，而且引入的js是app.js。 webpack/src/main.html打包生成的是webpack/build/main.html，js引入的是main.js。

template：須要打包的html的文件路徑
chunks：是一個數組，裏面的值對應entry裏的key，能夠寫多個，例如 chunks: ['app','main']

運行 $ npm run start, 分別打開 http://localhost:7777/main.html 和 http://localhost:7777/demo.html 能夠看到頁面效果



6、css單獨打包

安裝依賴 $ npm install extract-text-webpack-plugin --save-dev

new ExtractTextPlugin() 和 ExtractTextPlugin.extract() 詳細介紹戳這裏

  1. ExtractTextPlugin.extract()，有三個參數：
  • 第一個參數是可選參數，傳入一個loader，當css樣式沒有被抽取的時候可使用該loader；
  • 第二個參數則是用於編譯解析的css文件loader，很明顯這個是必須傳入的，就像上述例子的css-loader；
  • 第三個參數是一些額外的備選項，貌似目前只有傳入publicPath，用於當前loader的路徑。
  1. new ExtractTextPlugin([id: string], filename: string, [options])
  • [id: string]：該插件實例的惟一標誌，通常是不會傳的，其本身會生成
  • filename: 文件名，包含[name]、[id]、[contenthash]
    • [name]：將會和entry中的chunk的名字一致
    • [id]：將會和entry中的chunk的id一致
    • [contenthash]：根據內容生成hash值
  • options
    • allchunk： 是否將全部額外的chunk都壓縮成一個文件
    • disable：禁止使用插件



案例9

新建文件webpack/src/main.css

webpack/src/main.css

body {
  background: red;
}

webpack/src/main.js

import './main.css';
console.log('123')

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      }
    ],
  },
  plugins: [
      new HtmlWebpackPlugin({
        filename: 'demo.html', // 生成的的html文件名
        template: './src/index.html', // 被打包的html路徑
        chunks: ['app'] // 須要引入的js
      }),
      new HtmlWebpackPlugin({
        filename: 'main.html',
        template: './src/main.html',
        chunks: ['main']
      }),
      new ExtractTextPlugin("[name].css")
  ]
}

23

這裏寫了css和less兩種文件的打包，並生成對應的名字

運行 $ npm run build，效果以下

22

在index.js裏引入的index.less，最後生成的app.css，而且在index.html中引用了。在main.js裏引入的main.css，打包後生成main.css，而且在main.html中引用。

運行 $ npm run start, 分別打開 http://localhost:7777/main.html 和 http://localhost:7777/demo.html 能夠看到頁面效果。

這個時候會發現，若是修改js頁面仍是會自動刷新，若是修改css或者less，頁面須要手動刷新纔會看到最新的效果



7、圖片的處理

安裝依賴
$ npm i url-loader --save-dev
$ npm i file-loader --save-dev



案例10

新增 webpack/src/images/Ahri.jpg
Ahri

新增 webpack/src/images/Minions.jpg
Minions

webpack/src/index.less

body {
  height: 500px;
  background: url('./images/Ahri.jpg') no-repeat center;
}

webpack/src/main.css

body {
  background: url('./images/Minions.jpg') no-repeat;
}

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'demo.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路徑
      chunks: ['app'] // 須要引入的js
    }),
    new HtmlWebpackPlugin({
      filename: 'main.html',
      template: './src/main.html',
      chunks: ['main']
    }),
    new ExtractTextPlugin({
      filename: '[name].css'
    })
  ]
}

運行 $ npm run start

打開 http://localhost:7777/demo.html ，效果以下

24

打開 http://localhost:7777/main.html ，效果以下

26

運行 $ npm run build，以下所示

27

分析以下

25

  1. 除了png和jpg外，還能夠添加gif等，以「|」分隔。
  2. limit=8192，圖片小於8192字節時以，轉爲base64引入，大於8192字節時，調用file-loader打包生成文件
  3. name=images/[hash:8].[name].[ext]，「 images/ 」指定圖片打包到文件夾webpack/build/images，「 [hash:8] 」指8位 hash 值

能夠本身嘗試下這種打包出來的結果：

{
  test: /\.(png|jpg)$/, // img-loader
  loader: 'url-loader?limit=8192'
}

效果以下
28



8、引入jq

npm i jquery --save-dev



案例11

webpack/src/index.js

import './index.less';
import $ from 'jquery';
$('body').prepend('hehe');

這樣運行 $ npm run build，jquery被打包到app.js裏了



9、CommonsChunkPlugin 打包公共文件

new webpack.optimize.CommonsChunkPlugin({
  name: xx, // 對應entry的key
  filename: xx, // 輸出的文件名，若是不寫這個則以name爲輸出的文件名
  chunks: xx // 只有在這個文件中引入的模塊才能被打包
  minChunks: xx, // 符合引用次數的則被打包
})



案例12 --- 單一入口，分文件輸出

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    // main: './src/main.js'
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'demo.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路徑
      chunks: ['app', 'chunk'] // 須要引入的js
    }),
    // new HtmlWebpackPlugin({
    //   filename: 'main.html',
    //   template: './src/main.html',
    //   chunks: ['main']
    // }),
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.optimize.CommonsChunkPlugin("chunk")
  ]
}

29

$ npm run build, 打包出來的結果以下：

30

這裏注意，chunk.js必定要在app.js以前引入



案例13 --- 多入口，分文件輸出，jquery單獨打包

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: { // 入口文件地址
        app: './src/index.js',
        jquery: [ "jquery" ]
        // main: './src/main.js'
    },
    output: { // 出口
        path: __dirname + "/build", // 打包後的文件存放路徑
        filename: '[name].js' // 文件名，name即爲entry的key
    },
    module: {
        loaders: [
            {
                test: /\.js$/,  // js-loader
                loader: 'babel-loader?presets=es2015'
            },
            {
                test: /\.css$/, // css-loader
                loader: ExtractTextPlugin.extract(['css-loader'])
            },
            {
                test: /\.less/, // less-loader
                loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
            },
            {
                test: /\.(png|jpg)$/, // img-loader
                loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'demo.html', // 生成的的html文件名
            template: './src/index.html', // 被打包的html路徑
            chunks: ['app', 'jquery'] // 須要引入的js
        }),
        // new HtmlWebpackPlugin({
        //     filename: 'main.html',
        //     template: './src/main.html',
        //     chunks: ['main']
        // }),
        new ExtractTextPlugin({
            filename: '[name].css'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'jquery'
        })
    ]
}

31

運行 $ npm run build, 效果以下

32

經過webpack.optimize.CommonsChunkPlugin，將jquery單獨打包到jquery.js中。若是不寫這部分，app.js中也會被打包入jquery，你們能夠本身嘗試下。



案例14

webpack/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    app: './src/index.js',
    main: './src/main.js',
    jquery: [ "jquery" ]
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      }
    ],
  },
  plugins: [ // 插件
    new HtmlWebpackPlugin({
      filename: 'demo.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路徑
      chunks: ['app', 'jquery'] // 須要引入的js
    }),
    new HtmlWebpackPlugin({
      filename: 'main.html',
      template: './src/main.html',
      chunks: ['main']
    }),
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'jquery',
      chunks: ['app'] // 在app.js中引用的才被打包
    })
  ]
}

$ npm run build, main.js和app.js中均爲打包入jquery，jquery被單獨打包，而且僅在demo.html中引用。



10、js壓縮

這裏介紹兩種方式你們本身運行 $ npm run build 試試，對比下壓縮先後的效果

  1. new webpack.optimize.UglifyJsPlugin()

webpack/webpack.config.js的plugins添加以下
javascript module.exports = { plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }

  1. webpack -p

webpack/package.json的scripts修改以下
json "scripts": { "build": "webpack -p", },



十1、自動添加css前綴 postcss-loader

相似下面這種須要添加瀏覽器前綴等兼容的狀況，每次本身寫太麻煩，能夠用postcss-loader幫助咱們完成這些功能

display: -webkit-box;
display: -ms-flexbox;
display: flex;

這裏綜合上面所講的內容，從頭寫一個新的demo（簡單的留言板效果）, 效果以下
38

demo涉及到上面沒有講過的內容，以下：



案例15

新建項目文件夾 webpackDemo，文件目錄以下

33

運行 $ npm init。

安裝如下依賴 :
babel-core
babel-loader
babel-preset-es2015
css-loader
extract-text-webpack-plugin
file-loader
html-webpack-plugin
jquery
less
less-loader
style-loader
url-loader
webpack
webpack-dev-server

webpackDemo/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpackDemo</title>
</head>
<body>
  <div class="wrapper"></div>
</body>
</html>

webpackDemo/src/css/reset.less

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, button {
  outline:none;
}

webpackDemo/src/css/index.less

@import 'reset.less';
.wrapper {
  margin: 50px auto;
  border: 1px solid #000;
  width: 400px;
  height: 500px;
  background: lightpink;
}

webpackDemo/src/index.js

import '../src/css/index.less';
import $ from 'jquery';
$('.wrapper').append('您好');

webpackDemo/package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --content-base build --inline --hot",
    "build": "webpack -p",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.5"
  }
}

webpackDemo/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    index: './src/index.js',
    vendor: [ "jquery" ]
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader
        loader: ExtractTextPlugin.extract(['css-loader'])
      },
      {
        test: /\.less/, // less-loader
        loaders: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路徑
      chunks: ['index', 'vendor'] // 須要引入的js，對應entry的key
    }),
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor' // 對應entry的key
    })
  ]
}

運行 $ npm run start, 打開 http://localhost:8080/ ，效果以下：

34

下面寫banner（輸入框和發送按鈕）部分，先寫一個簡單的js

新建 webpackDemo/src/js/banner.js

webpackDemo/src/js/banner.js

export default function ($wrapper) {
  $wrapper.append('banner');
}

webpackDemo/src/index.js

import '../src/css/index.less';
import $ from 'jquery';
import bannerRender from '../src/js/banner';

const $wrapper = $('.wrapper');

const init = () => {
  bannerRender($wrapper);
}

init();

效果以下：

35

下面寫banner部分的html部分和css部分

安裝依賴 $ npm i atpl-loader postcss-loader --save-dev

新建
webpackDemo/src/tpl/banner.atpl
webpackDemo/src/css/banner.less
webpackDemo/postcss.config.js

webpackDemo/postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpackDemo/webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: { // 入口文件地址
    index: './src/index.js',
    vendor: [ "jquery" ]
  },
  output: { // 出口
    path: __dirname + "/build", // 打包後的文件存放路徑
    filename: '[name].js' // 文件名，name即爲entry的key
  },
  module: {
    loaders: [
      {
        test: /\.js$/,  // js-loader
        loader: 'babel-loader?presets=es2015'
      },
      {
        test: /\.css$/, // css-loader postcss-loader
        loader: ExtractTextPlugin.extract('css-loader!postcss-loader')
      },
      {
        test: /\.less/, // less-loader postcss-loader
        loaders: ExtractTextPlugin.extract('css-loader!less-loader!postcss-loader')
      },
      {
        test: /\.(png|jpg)$/, // img-loader
        loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      },
      {
        test: /\.atpl?$/, // atpl
        loader: 'atpl-loader',
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 生成的的html文件名
      template: './src/index.html', // 被打包的html路徑
      chunks: ['index', 'vendor'] // 須要引入的js，對應entry的key
    }),
    new ExtractTextPlugin({
      filename: '[name].css'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor' // 對應entry的key
    })
  ]
}

webpackDemo/src/tpl/banner.atpl

<div class="banner-wrap">
  <input class="ipt" placeholder="在這裏輸入留言內容" />
  <button class="btn">發送</button>
</div>

webpackDemo/src/css/banner.less

.banner-wrap {
  height: 50px;
  background: #fff;
  display: flex;
  .ipt {
    flex: 1;
    border: 0;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 16px;
  }
  .btn {
    border: 0;
    width: 50px;
    border-radius: 0;
    color: #fff;
    font-size: 16px;
    background: #666;
  }
}

webpackDemo/src/js/banner.js

import '../css/banner.less';
import bannerTpl from '../tpl/banner.atpl';

export default function ($wrapper) {
  $wrapper.append(bannerTpl({}));
}

運行 $ npm run start , 打開 http://localhost:8080/index.html , 效果以下

36

下面寫留言區域的部分

新建
webpackDemo/src/tpl/message.atpl
webpackDemo/src/css/message.less
webpackDemo/src/js/message.js

webpackDemo/src/tpl/message.atpl 

<ul class="message-wrap">
  <li>你們好！你們好！你們好！你們好！你們好！你們好！你們好！你們好！你們好！你們好！你們好！你們好！</li>
  <li>留言6666666</li>
  <li>留言555555</li>
  <li>留言44444444</li>
  <li>留言3333333</li>
  <li>留言222222222</li>
  <li>留言11111111</li>
</ul>

webpackDemo/src/css/message.less

.message-wrap {
  padding: 25px;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  li {
    border-bottom: 1px dashed lightcoral;
    padding: 10px 0;
    line-height: 1.5;
  }
}

webpackDemo/src/js/message.js

import '../css/message.less';
import messageTpl from '../tpl/message.atpl';

export default function ($wrapper) {
  $wrapper.append(messageTpl({}));
}

webpackDemo/src/index.js

import '../src/css/index.less';
import $ from 'jquery';
import bannerRender from '../src/js/banner';
import messageRender from '../src/js/message';

const $wrapper = $('.wrapper');

const init = () => {
  bannerRender($wrapper); // 引入banner部分
  messageRender($wrapper); // 引入message部分
}

init();

運行 $ npm run start , 打開 http://localhost:8080/index.html , 效果以下

37

接下來寫留言功能

webpackDemo/src/js/banner.js

import '../css/banner.less';
import bannerTpl from '../tpl/banner.atpl';

// html
const render = ($wrapper) => {
    $wrapper.append(bannerTpl({}));
}

// 事件
const bindEvents = ($wrapper) => {
    // 點擊發送按鈕發送輸入框內容
    $wrapper.on('click', '.btn', () => {
        const $ipt = $wrapper.find('.ipt');
        const $messageWrap = $wrapper.find('.message-wrap');
        const val = $ipt.val();
        // 當input有內容的時候才容許發送
        if ($ipt.length && val.length) {
            $messageWrap.prepend(`<li>${val}</li>`);
            // 發送完後清空input的val
            $ipt.val('');
        }
    })
}

export default function ($wrapper) {
    render($wrapper);
    bindEvents($wrapper);
}

運行 $ npm run start , 打開 http://localhost:8080/index.html，就能看到以下效果了

38

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程