簡介

webpakc的定位實際上是打包器.而不是任務執行器.

當然也可以配合grunt進行使用. webpack也提供了便捷的打包流程,項目構建,插件管理等等.

為了更好的構建項目從開發到生產都一一提供瞭解決方案. Vue官方也推薦使用的vue-loader也是基於webpack的.

因此這裡簡單介紹一下webpack的使用一些總結.更詳細細緻的內容可以到官網進行拓展.

安裝

局部安裝

使用命令行的安裝方式 :

npminstall--save-devwebpack

我們可以寫到配置文件當中package.json,對應的目錄中然後再執行npm install

{
  "name": "XXXX",
  "version": "1.0.0",
  "description": "XXX",
  "author": "XXX",
  "private": true,
  "scripts": {//指定執行命令
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "watch":"webpack --watch",
    "build": "webpack --config webpack.prod.js",//也可以進行自定義
    "debug": "nodemon build/build.js"
  },
  "dependencies": {
    "swiper": "^4.0.7",
    "vue": "^2.5.2",
    "vue-router": "^2.8.1",
    "element-ui": "2.2.1"
  },
  "devDependencies": {
  }
}

全局安裝

npm install --global webpack

工程結構

我們可以根據項目的實際的情況設置目錄. 
一般情況下可以設置為源碼目錄,生產目錄.

我們可以將webpack配置文件與package.json放入到項目的根目錄.

webpack配置文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};  

目錄結構如下:

1.webpack-demo

2.|- package.json

3.|- webpack.config.js

4.|- /dist

5.|- bundle.js

6.|- index.html

7.|- /src

8. /src|- index.js

9.|- /node_modules

資源管理

這裡先簡單介紹下CSS資源的管理配置.

安裝loader,loader的作用就是將文件進行處理(編譯,壓縮).

1.npm install --save-dev style-loader css-loader


module.exports =     
{
    module: {
      rules: [
        {
          test: /\.css$/, //指定匹配文件,使用style-loader,css-loader
          use: [
            'style-loader',
            'css-loader'
          ]
      }]
     }
}

輸出管理

輸出管理的目的是為了更好的簡化工作. 
我們可以使用插件,輸出js名字更替等

webpack當中有許多的插件我麽可以將其進行更替.

這邊先簡單介紹兩個插件 生成html的插件,清除目錄的插件.

npm install clean-webpack-plugin--save-dev 
 npm install --save-dev html-webpack-plugin

整個配置文件,註意插件的配置順序.

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),//清除dist目錄
      new HtmlWebpackPlugin({ //生成一個html頁面指定其title,然後會自動將js文件生成引入js代碼
        title: 'Output Management'
      })
    ],
    output: {
      //publicPath:XXX 可以資金定義路徑,build後輸出的內容將會放入到這個路徑當中
      filename: '[name].bundle.js', //註意name用方括弧括起來,name的值對應的為entry的key值,這樣為了區分多個文件 
      path: path.resolve(__dirname, 'dist')
    }
  };

開發工具

webpack 最強大的是開發提供的開發工具

webpack-server 提供了訪問頁面的服務

webpack-watch 提供了觀察文件的變化

webpack-dev-middleware webpack-server內部也是採用了該方法,不僅如此,也提供了其它的自定義的功能很強大.

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
   //devServer: {
   //  contentBase: './dist'
   //},
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
     publicPath: '/'//middleware會用到該路徑,url訪問的路徑
    }
  };

版權聲明：本文為CSDN博主「代碼界吳彥祖」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/lzx_victory/article/details/79995225

感謝給位的閱讀，本人在休閑之餘整理了一些資料和視頻，並剛剛創建了一個交流群：907694362 也是我之前剛開始學前端時候看的一些資料，希望對給位有所幫助，也祝各位在前端之路一帆風順！！