從零開始的Webpack4教程

時間  2019-12-06
標籤 開始 webpack4 webpack 教程 简体版
原文   原文鏈接

一、瞭解Webpack相關

  • 什麼是webpack
    • Webpack是一個模塊打包器(bundler)。
    • 在Webpack看來, 前端的全部資源文件(js/json/css/img/less/...)都會做爲模塊處理
    • 它將根據模塊的依賴關係進行靜態分析，生成對應的靜態資源
  • 五個核心概念
    • Entry：入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。
    • Output：output 屬性告訴 webpack 在哪裏輸出它所建立的 bundles，以及如何命名這些文件，默認值爲 ./dist。
    • Loader：loader 讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
    • Plugins：插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量等。
    • Mode：模式，有生產模式production和開發模式development
  • 理解Loader
    • Webpack 自己只能加載JS/JSON模塊，若是要加載其餘類型的文件(模塊)，就須要使用對應的loader 進行轉換/加載
    • Loader 自己也是運行在 node.js 環境中的 JavaScript 模塊
    • 它自己是一個函數，接受源文件做爲參數，返回轉換的結果
    • loader 通常以 xxx-loader 的方式命名，xxx 表明了這個 loader 要作的轉換功能，好比 json-loader。
  • 理解Plugins
    • 插件能夠完成一些loader不能完成的功能。
    • 插件的使用通常是在 webpack 的配置信息 plugins 選項中指定。
  • 配置文件(默認)
    • webpack.config.js : 是一個node模塊，返回一個 json 格式的配置信息對象

二、開啓項目

  • 初始化項目：
    • 生成package.json文件
      {
  "name": "webpack_test",
  "version": "1.0.0"
} 
複製代碼
  • 安裝webpack
    • npm install webpack webpack-cli -g //全局安裝
    • npm install webpack webpack-cli -D //本地安裝

三、編譯打包應用

  • 建立js文件
    • src/js/app.js
    • src/js/module1.js
    • src/js/module2.js
    • src/js/module3.js
  • 建立json文件
    • src/json/data.json
  • 建立主頁面:
    • src/index.html
  • 運行指令
    • 開發配置指令：webpack src/js/app.js -o dist/js/app.js --mode=development
      • 功能: webpack可以編譯打包js和json文件，而且能將es6的模塊化語法轉換成瀏覽器能識別的語法
    • 生產配置指令：webpack src/js/app.js -o dist/js/app.js --mode=production
      • 功能: 在開發配置功能上加上一個壓縮代碼
  • 結論：
    • webpack可以編譯打包js和json文件
    • 能將es6的模塊化語法轉換成瀏覽器能識別的語法
    • 能壓縮代碼
  • 缺點：
    • 不能編譯打包css、img等文件
    • 不能將js的es6基本語法轉化爲es5如下語法
  • 改善：使用webpack配置文件解決，自定義功能

四、使用webpack配置文件

  • 目的：在項目根目錄定義配置文件，經過自定義配置文件，還原以上功能
  • 文件名稱：webpack.config.js
  • 文件內容：
    const {resolve} = require('path'); //node內置核心模塊，用來設置路徑。
module.exports = {
  entry: './src/js/app.js',   // 入口文件
  output: {                     // 輸出配置
    filename: './js/bundle.js',      // 輸出文件名
    path: resolve(__dirname, 'dist')   //輸出文件路徑配置
  },
  mode: 'development'   //開發環境(二選一)
  mode: 'production'   //生產環境(二選一)
};
複製代碼
  • 運行指令： webpack

五、js語法檢查

  • 安裝loader
    • npm install eslint-loader eslint --save-dev
  • 配置loader
    module: {
  rules: [
    {
      test: /\.js$/,  //只檢測js文件
      exclude: /node_modules/,  //排除node_modules文件夾
      enforce: "pre",  //提早加載使用
      use: { //使用eslint-loader解析
        loader: "eslint-loader" 
      }
    }        
  ]
}
複製代碼
  • 修改package.json（須要刪除註釋才能生效）
    "eslintConfig": {   //eslint配置
  "parserOptions": {  
    "ecmaVersion": 8,  // es8
    "sourceType": "module", //  ECMAScript 模塊
  }
}
複製代碼
  • 運行指令：webpack

六、js語法轉換

  • 安裝loader
    • npm install babel-loader @babel/core @babel/preset-env --save-dev
  • 配置loader
    module: {
  rules: [
    {
      oneOf: [  //數組中的配置只有一個可以生效, 後面的配置都會放在當前數組中
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  ]
}
複製代碼
  • 運行指令：webpack

七、打包less資源

  • 建立less文件
    • src/less/test1.less
    • src/less/test2.less
  • 入口app.js文件
    • 引入less資源
  • 安裝loader
    • npm install css-loader style-loader less-loader less --save-dev
  • 配置loader
    oneOf: [
  {
    test: /\.less$/,
    use: [{
      loader: "style-loader"
    }, {
      loader: "css-loader" 
    }, {
      loader: "less-loader" 
    }]
  }
]
複製代碼
  • 運行指令：webpack
  • 在index.html中引入打包生成的dist/js/bundle.js文件,觀察效果

八、打包樣式文件中的圖片資源

  • 添加2張圖片:css

    • 小圖, 小於8kb: src/images/1.png
    • 大圖, 大於8kb: src/images/2.jpg

  • 在less文件中經過背景圖的方式引入圖片html

  • 安裝loader前端

    • npm install file-loader url-loader --save-dev
    • 補充：url-loader是對象file-loader的上層封裝，使用時需配合file-loader使用。

  • 配置loadernode

    {
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        outputPath: 'images/',   //在output基礎上，修改輸出圖片文件的位置
        publicPath: '../dist/images/',  //修改背景圖引入url的路徑
        limit: 8 * 1024,  // 8kb大小如下的圖片文件都用base64處理
        name: '[hash:8].[ext]'  // hash值爲7位，ext自動補全文件擴展名
      }
    }
  ]
}
複製代碼

  • 運行指令：webpackwebpack

  • 在index.html中引入打包生成的dist/js/bundle.js文件,觀察效果git

九、打包html文件

  • 添加html文件
    • src/index.html
    • 注意不要在html中引入任何css和js文件
  • 安裝插件Plugins
    • npm install clean-webpack-plugin --save-dev
  • 在webpack.config.js中引入插件（插件都須要手動引入，而loader會自動加載）
    • const CleanWebpackPlugin = require('clean-webpack-plugin')
  • 配置插件Plugins
    plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
]
複製代碼
  • 運行指令：webpack

十、打包html中圖片資源

  • 添加圖片
    • 在src/index.html添加兩個img標籤
  • 安裝loader
    • npm install html-loader --save-dev
  • 修改entry
    • entry: ['./src/js/app.js', './src/index.html']
  • 配置loader
    {
  test: /\.(html)$/,
  use: {
    loader: 'html-loader'
  }
}
複製代碼
  • 運行指令：webpack

十一、打包其餘資源

  • 添加字體文件
    • src/media/iconfont.eot
    • src/media/iconfont.svg
    • src/media/iconfont.ttf
    • src/media/iconfont.woff
    • src/media/iconfont.woff2
  • 修改樣式
    @font-face {
  font-family: 'iconfont';
  src: url('../media/iconfont.eot');
  src: url('../media/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../media/iconfont.woff2') format('woff2'),
  url('../media/iconfont.woff') format('woff'),
  url('../media/iconfont.ttf') format('truetype'),
  url('../media/iconfont.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
複製代碼
  • 修改html，添加字體
  • 配置loader
    {
  loader: 'file-loader',
  exclude: [/\.js$/, /\.html$/, /\.json$/],
  options: {
    outputPath: 'media/',
    publicPath: '../dist/media/',
    name: '[hash:8].[ext]',
  },
}
複製代碼
  • 運行指令：webpack

十二、自動編譯打包運行

  • 安裝loader
    • npm install webpack-dev-server --save-dev
  • 引入webpack
    • const webpack = require('webpack');
  • 修改webpack配置對象（注意不是loader中）
    devtool: 'inline-source-map',  // 將編譯後的代碼映射回原始源代碼，更容易地追蹤錯誤和警告
devServer: {
  contentBase: './dist',  //項目根路徑
  hot: true,  //開啓熱模替換功能
  open: true  //自動打開瀏覽器
},
plugins: [
  new webpack.NamedModulesPlugin(),
  new webpack.HotModuleReplacementPlugin()
]
複製代碼
  • 修改loader部分配置
    • 由於構建工具以dist爲根目錄，不用再找dist了
    • publicPath: '../dist/images/' --> publicPath: 'images/'
    • publicPath: '../dist/media/' --> publicPath: 'media/'
  • 修改package.json中scripts指令
    • "start": "webpack-dev-server",
    • "dev": "webpack-dev-server"
  • 運行指令：npm start / npm run dev

以上就是webpack開發環境的配置，能夠在內存中自動打包全部類型文件並有自動編譯運行、熱更新等功能。es6

1三、準備生產環境

  • 建立文件夾config，將webpack.config.js複製兩份
    • webpack.dev.js
    • webpack.prod.js
  • 修改webpack.prod.js配置，刪除webpack-dev-server配置
    module.exports = {
  output: {
    filename: 'js/[name].[hash:8].js',   //添加了hash值, 實現靜態資源的長期緩存
    publicPath: '/'  //全部輸出資源公共路徑
  },
  module: {  //loader其餘沒有變化，只放了變化部分，只有須要修改路徑部分改了
    rules: [
      {
        oneOf: [
          {
            test: /\.(png|jpg|gif|svg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8 * 1024,  // 8kb大小如下的圖片文件都用base64處理
                  name: 'images/[name].[hash:8].[ext]'
                }
              }
            ]
          },
          {
            loader: 'file-loader',
            exclude: [/\.js$/, /\.html$/, /\.json$/],
            options: {
              name: 'media/[name].[hash:8].[ext]',
            },
          }
        ]
      }
    ]
  },
  mode: 'production',  //修改成生產環境
}
複製代碼
  • 修改package.json的指令
    • "start": "webpack-dev-server --config ./config/webpack.dev.js"
    • "dev": "webpack-dev-server --config ./config/webpack.dev.js"
    • "build": "webpack --config ./config/webpack.prod.js"
  • 開發環境指令
    • npm start
    • npm run dev
  • 生產環境指令
    • npm run build
    • 注意: 生產環境代碼須要部署到服務器上才能運行
      • npm i serve -g
      • serve -s dist

1四、清除打包文件目錄

  • 安裝插件
    • npm install clean-webpack-plugin --save-dev
  • 引入插件
    • const CleanWebpackPlugin = require('clean-webpack-plugin');
  • 配置插件
    new CleanWebpackPlugin()
複製代碼
  • 運行指令：npm run build

1五、提取css成單獨文件

  • 安裝插件
    • npm install mini-css-extract-plugin --save-dev
  • 引入插件
    • const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  • 配置loader
    {
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'less-loader',
  ]
}
複製代碼
  • 配置插件
    new MiniCssExtractPlugin({
  filename: "css/[name].[hash:8].css",
  chunkFilename: "css/[id].[hash:8].css"
})
複製代碼
  • 運行指令
    • npm run build
    • serve -s dist

1六、添加css兼容

  • 安裝loader
    • npm install postcss-loader autoprefixer --save-dev
  • 配置loader
    {
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'less-loader',
  ]
}
複製代碼
  • 在項目根目錄添加postcss配置文件：postcss.config.js
    module.exports = {
  "plugins": {
    "autoprefixer": {
      "browsers": [
        "ie >= 8",
        "ff >= 30",
        "chrome >= 34",
        "safari >= 8",
        "opera >= 23"
      ]
    }
  }
}
複製代碼
  • 運行指令：
    • npm run build
    • serve -s dist

1七、壓縮css

  • 安裝插件
    • npm install optimize-css-assets-webpack-plugin --save-dev
  • 引入插件
    • const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  • 配置插件
    new OptimizeCssAssetsPlugin({
  cssProcessorPluginOptions: {
    preset: ['default', { discardComments: { removeAll: true } }],
  },
})
複製代碼
  • 運行指令：
    • npm run build
    • serve -s dist

1八、圖片壓縮

  • 安裝loader
    • npm install img-loader imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin --save-dev
  • 配置loader
    {
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8 * 1024,  // 8kb大小如下的圖片文件都用base64處理
        name: 'images/[name].[hash:8].[ext]'
      }
    },
    {
      loader: 'img-loader',
      options: {
        plugins: [
          require('imagemin-gifsicle')({
            interlaced: false
          }),
          require('imagemin-mozjpeg')({
            progressive: true,
            arithmetic: false
          }),
          require('imagemin-pngquant')({
            floyd: 0.5,
            speed: 2
          }),
          require('imagemin-svgo')({
            plugins: [
              { removeTitle: true },
              { convertPathData: false }
            ]
          })
        ]
      }
    }
  ]
}
複製代碼
  • 運行指令：
    • npm run build
    • serve -s dist

1九、壓縮html

  • 修改插件配置
    new HtmlWebpackPlugin({
  template: './src/index.html',
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }
})
複製代碼
  • 運行指令：
    • npm run build
    • serve -s dist

以上就是webpack生產環境的配置，能夠生成打包後的文件。github

到這裏基本配置已經告一段落了，全部配置我已經放在 倉庫 中了。web

第二期webpack優化配置已出~chrome

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