webpack3.x 學習筆記

時間  2019-11-11
標籤 webpack3.x webpack 學習 筆記 简体版
原文   原文鏈接

學習文章： http://jspang.com/2017/09/16/webpack3-2/
webpack文檔： https://doc.webpack-china.org/concepts/javascript

目錄css

  • 安裝webpack  
  • 監聽和入口出口
  • 服務和熱更新
  • 打包css文件
  • 壓縮js代碼
  • 打包html文件
  • 圖片大坑
  • 增長babel支持（es6,es7語法轉換）

  • 常見報錯集錦html

  • 安裝webpack

    npm 初始化java

    npm init    // 須要輸入項目名稱、版本號、項目描述、做者等等..
  npm init -y // 選項都是默認內容，不用一個個輸入，後續須要修改直接在package.json文件改就好了

    *注：npm在國內下載安裝模塊太慢，能夠換成cnpm(淘寶npm鏡像)node

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    本地安裝react

    npm install --save-dev webpack
  npm install --save-dev webpack@<version>

  //說明: --save表明把這個模塊保存到package.json裏面， -dev表明用於開發環境

    全局安裝(不建議全局安裝webpack,後面有坑)webpack

    npm install --global webpack //安裝
  npm uninstall webpack -g    // 卸載

    附：
    若是是最新版本4.5的話， 運行webpack -v 查詢webpack版本號的時候，會顯示是否安裝 webpack-cli ,
    運行 npm install -D webpack-cli ，
    完成以後仍是會報錯，仍是須要全局安裝一下，在運行 npm install -g webpack-cli ，
    最後 webpack -v 版本號出來了，完美~css3

監聽和入口出口

頁面監聽(古老方法，後續有webpack自帶的服務介紹)

// 簡單粗暴型
    npm install live-server -g //全局安裝
    live-server // 自動在瀏覽器打開查看，默認地址 http://127.0.0.1:8080

 2.2 基礎打包

**無配置webpack.config.js文件**

3.x

    webpack src/entery.js dist/bundle.js
    // src/entery.js 入口文件
    // dist/bundle.js 出口文件

4.x

    webpack --mode=development  // 無配置webpack.config.js文件的狀況下，藉助webpack-cli
    // index.js 入口文件
    // main.js 出口文件 


**配置webpack.config.js**

只須要運行 `webpack` 便可打包成功

    const path = require('path');
    module.exports = {
        mode: 'development', // development(開發環境)或者production(生產環境)
        /* entry入口文件
         * entry 屬性的單個入口語法,還有多個入口的，詳情請看文檔
        */
        entry: {
            entry: './src/entry.js'
        },

        // output 目標輸出
        output: {
            path: path.resolve(__dirname, 'dist'), // 目標輸出絕對路徑
            filename: 'bundle.js'
        },
    }
 
---

  • 服務和熱更新

    安裝命令 npm install webpack-dev-server --save-devgit

    在webpack.config.js裏面配置服務devServeres6

    const config = {
      devServer: {
          contentBase: path.resolve(__dirname, 'dist'), //入口路徑
          host: '192.168.1.106', // 本機ip地址
          compress: true, // 服務壓縮，通常設置爲true
          port: 9090  //端口，隨便設置
      } 
  }

    在package.json文件裏面配置簡短別名

    "scripts": {
          "dev": "webpack-dev-server"  // 監聽
      },
      // 注： 'webpack-dev-server --open'  是直接打開入口頁面到瀏覽器

  • 打包css文件

    4.1 css打包

    style-loader 處理css文件中的url()等
    css-loader 將css插入到頁面的style標籤

    // css必須安裝這兩個loader
  cnpm install style-loader css-loader -D  // "-D"表示"--save-dev"

    loader配置，在wepack.congig.js文件下配置module

    const config = {
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: ['style-loader', 'css-loader']
              }
          ]
      }, 
  }

    loader還有如下的幾種寫法：

    1.上面寫的，直接傳遞字符串組， loader 屬性的簡寫方式
    2.把use換成loader

    const config = {
      module: {
          rules: [
              {
                  test: /\.css$/,
                  loader: ['style-loader', 'css-loader']
              }
          ]
      }, 
  }

    3.use + loader屬性的寫法

    const config = {
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: [
                      'style-loader',
                      {
                          loader: 'css-loader',
                          options: {
                              importLoaders: 1
                          }
                      }
                  ]
              }
          ]
      }, 
  }

    4.2 Less文件的打包和分離

    安裝less

    cnpm i less -D // less服務
  cnpm i less-loader -D //loader打包使用

  // 一塊兒安裝
  cnpm i less less-loader -D

    loader配置
    webpack.config.js

    module: {
      rules: [
          {
              test: /\.less$/,
              use: [
                  {
                      loader: "style-loader"
                  },
                  {
                      loader: "css-loader"
                  },
                  {
                      loader: "less-loader"
                  }
              ]
          }
      ]
  },

    分離less插件

    cnpm i extract-text-webpack-plugin -D // 前面已安裝過度離插件

    修改webpack.config.js

    module: {
      rules: [
          {
              test: /\.less$/,
              use: extractTextPlugin.extract({
                  use: [
                      {
                          loader: "css-loader"
                      },
                      {
                          loader: "less-loader"
                      }
                  ],
              fallback: "style-loader"
              })
          },
      ]
  }

    4.3 sass文件的打包和分離

    sass的配置和less的差很少

    安裝模塊

    cnpm i node-sass -D // sass-loader依賴no-sass,因此要先安裝
  cnpm i sass-loader -D //loader打包使用

  // 一塊兒安裝
  cnpm i node-sass sass-loader -D

    loader配置
    webpack.config.js

    module: {
      rules: [
          {
              test: /\.scss$/,
              use: [
                  {
                      loader: "style-loader"
                  },
                  {
                      loader: "css-loader"
                  },
                  {
                      loader: "sass-loader"
                  }
              ]
          }
      ]
  },

    分離less插件

    cnpm i extract-text-webpack-plugin -D // 前面已安裝過度離插件

    修改webpack.config.js

    module: {
      rules: [
          {
              test: /\.scss$/,
              use: extractTextPlugin.extract({
                  use: [
                      {
                          loader: "css-loader"
                      },
                      {
                          loader: "sass-loader"
                      }
                  ],
              fallback: "style-loader"
              })
          },
      ]
  }

    4.4 自動處理css3屬性前綴

    PostCSS是一個css處理平臺，能夠幫助css實現更多功能，使用autoprefixr插件可使PostCSS擁有自動添加前綴的功能。更多PostCSS相關操做查看它的github地址：https://github.com/postcss/postcss-loader;

    安裝

    cnpm i postcss-loader autoprefixer -D

    在根目錄新建一個postcss.config.js文件（與webpack.config.js同級）

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

    在webpack.config.js裏配置loader(打包和分離)

    module: {
      rules：[  
          {
              test: /\.css$/,
              use: extractTextPlugin.extract({
              fallback: 'style-loader',
              use: [
                  {
                      loader: 'css-loader',
                      options: {
                          importLoaders: 1
                      }
                  },
                  {
                      loader: 'postcss-loader'
                  }
              ]
              })
          },
      ]
  }

    4.5 消除未使用的css（減小css冗餘）

    purifycss-webpack要依賴於purify-css,安裝

    cnpm i purify-css purificss-webpack -D

    配置webpack.config.js

    const glob = require('glob'); // 引入node的glob對象，同步檢測html模板，遍歷文件，查找哪些css被使用了
  const purifyCSSPlugin = require('purifycss-webpack');

  plugins: [
      new extractTextPlugin('css/index.css'),
      new purifyCSSPlugin({
          paths: glob.sync(path.join(__dirname, 'src/*.html'))
      })
  ],

    注意：使用這個插件必須配合extract-text-webpack-plugin這個插件。

  • 壓縮js代碼

    引用webpack內置插件

    const uglifyPlugin = require('uglifyjs-webpack-plugin');

    在webpack.config.js配置插件

    const config = {
      plugins: [
          new uglifyPlugin()
      ],
  }

  • 打包html文件

    用cnpm安裝包

    cnpm i html-webpack-plugin -D

    在webpack.config.js引用插件包

    const uglifyPlugin = require('uglifyjs-webpack-plugin');

    在webpack.config.js配置插件

    plugins: [
      new uglifyPlugin(),
      new htmlPlugin({
          minify:{ // minify對html文件進行壓縮
              removeAttributeQuotes:true // 去掉html屬性值裏面的雙引號("");
          },
          hash:true, // 加入哈希值避免緩存問題
          template:'./src/index.html' // 打包的html模板路徑和文件名字

      })
  ],

  • 圖片大坑

    7.1 CSS中的圖片處理

    因爲缺乏loader對圖片的解析，會在終端報錯，以下圖：

    圖片

    因此須要安裝loader

    cnpm i url-loader -D

    配置webpack.config.js文件

    const config = {
      module: {
          rules: [
              {
                  test: /\.(png|gif|jpg|svg|jpeg)$/,
                  use: [
                      {
                          loader: 'url-loader',
                          options: {
                              limit: 8192, // 把小於8192B的文件打成Base64的格式
                              outputPath:'images/ ' // 輸出的圖片路徑
                          }
                      }
                  ]
              }
          ]
      },
  }
    url-loader： 內置有file-loader, 當在圖片較多的狀況下，會發送很是多的http請求，下降頁面頁面性能，url-loader就能夠解決這個問題，url-loader會將引入的小圖片編碼，生成dataURl。至關於把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只須要引入這個文件就能訪問圖片了。
    url-loader工做分爲兩種狀況：
    1. 文件大小小於limit參數，url-loader會將文件轉成dataUrl(base64g格式);
    2. 文件大小大於limit參數，url-loader會直接調用file-loader進行處理，參數也會傳給file-loader。

    file-loader： 解決圖片引用路徑的問題，file-loader能夠解析項目中的url引入（不只限於css），它能夠根據咱們的配置，將圖片拷貝到相應的路徑，在修改打包後文件引用路徑，使之指向正確文件。

    7.2 CSS分離與圖片路徑處理

    7.2.1 css分離插件

    cnpm i extract-text-webpack-plugin -D

    webpack.config.js中配置

    const extractTextPlugin = require('extract-text-webpack-plugin'); // 引入
  module.exports = {
      module: {
          rules: [
          {
              test: /\.css$/,
              use: extractTextPlugin.extract({
              fallback: "style-loader",
              use: "css-loader" //用於將資源轉換成一個 CSS 導出模塊
              })
          }
          ]
      },
      plugins: [
          new extractTextPlugin("css/index.css")
      ]
  }

    7.2.2 圖片路徑問題

    利用extract-text-webpack-plugin插件確實是能夠把css完美分離出來，可是圖片路徑卻不對，因此須要用到publicPath,在webpack.config.js裏配置：

    // 聲明website(本機ip或者是devServer設置的ip) **疑問？上線的項目咋整？**
  const website ={
      publicPath:"http://192.168.1.248:9090/"
  }
  module.exports = {
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: '[name].js',
          publicPath: website.publicPath
      }
  }

    7.3 處理HTML中的圖片

    解決在hmtl文件中引入<img>標籤的問題

    cnpm install html-withimg-loader --save-dev

    在webpack.config.js配置

    module: {
      rules: [
          {
              test: /\.(htm|html)$/i,
              use:['html-withimg-loader']
          }
      ]
  },

  • 增長babel支持（es6,es7語法轉換）

    babel是一個編譯javascript的平臺，它能夠經過編譯達到如下目的：

    • 使用下一代的javascript代碼（如es6,es7）,這些標準目前並未被當前瀏覽器徹底支持；
    • 使用基於javascript進行擴展的語言，例如React的JSX.

    Babel的安裝

    Babel是幾個模塊的包，其核心功能位於babel-core的npm包中。
    安裝依賴包：（babel-preset-env解析es6）

    cnpm i babel-core babel-loader babel-preset-env -D

    在webpack.config.js中配置loader

    {
      test:/\.(jsx|js)$/,
      use:{
          loader:'babel-loader'
      },
      exclude:/node_modules/
  }

    .babelrc配置

    {
      "presets":["react","env"]
  }

    或者直接在webpack.config.js中配置babel,建議把babel配置分開到.babelrc文件，如上所述。

    module: {
      rules: [
          {
              test:/\.(jsx|js)$/,
              use:{
                  loader:'babel-loader',
                  options:{
                      presets:[
                          "es2015","react"
                      ]
                  }
              },
              exclude:/node_modules/
          }
      ]
  }

    babel-preset-es2015也能夠解析es6,可是網上已經不流行了，官方推薦使用babel-preset-env.
    babel-preset-es2015的配置方法和babel-preset-env差很少，只要把env改成es2015

    {
      "presets":["env"]
  }

  • 常見報錯集錦

    • 1.ip不正確或者端口被佔用

      錯誤1

      *注：在這種狀況下要注意檢查本機Ip是否寫正確，端口是否被佔用。(查看本機ip方法, win+R打開運行 -> 輸入cmd -> 執行ipconfig)

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