webpack的那些事兒

MasonEast發表於2019-05-12
Web
不管是vue-cli還是react-sprite，其實都是基於webpack實現的。試想，如果沒有腳手架，你自己能搭一個嗎？看完這篇部落格，讓你明白webpak都有些什麼東西 

 webpack其實沒有那麼神奇，就是一個打包工具，而且它本身只能打包js，而圖片，css，html其實都是依靠它的loader和plugin完成的。 

webpack.config.js檔案，看名字就知道它是webpack的配置檔案。該檔案一般包括：入口entry，出口output，loader和外掛plugin

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  }}複製程式碼

來解析下上面的程式碼，

第一行的path其實是node的核心模組，webpack其實就是基於node的產物，你的電腦要是沒有node，你也裝不了webpack的。 

接下來會向外暴露： 

mode可以指定是development環境還是production環境。腳手架沒有這一項，因為它已經分了dev.conf.js和prod.conf.js。 

entry指定你要打包的入口檔案，

output指定你要打包到哪和打包檔案的名字。

module模組一般用來設定你程式碼中要打包的css，圖片之類的loader。

上面就是解析css的loader，肯定有人好奇為什麼會有三個： 

style-loader：將會建立style標籤，將樣式放到頁面中 

css-loader：將css程式碼轉成js能接受的字串 

post-loader：尋找那些需要瀏覽器相容加字首的樣式，比如-webkit-，你沒加，但loader會幫你補全，是不是很省心。這個loader有點不一樣的是他依賴一個autoprefixer的配置檔案。

這也就能解釋為什麼你的專案中引入less，sass之類的擴充套件語言要寫三個loader。  

注意：這三個loader的順序不能錯，loader是從右往左執行的。 接下來的devtool不是必須的，他會保留程式碼編譯前的模樣，方便調式，上線一定要關掉，不然會讓你打包的大小增大很多。  

自己配置一個webpack：

webpack的那些事兒

上面的build裡的bundle.js就是打包後生成的檔案。webpack.config.js就是上面的程式碼，postcss.config.js就是postcss-loader需要的配置檔案

//1.js
import '../css/1.css'
console.log(111)複製程式碼

//postcss.config.js
const autoprefixer = require('autoprefixer')
module.exports = {  plugins: [    autoprefixer  ]}複製程式碼

//1.css
#div1 {
  width: 200px;
  height: 200px;
  transition: 1s all ease;
  background-color: rgb(148, 148, 148);
}
#div1:hover {
  transform: rotateY(60deg)
}複製程式碼

此時，在命令列中執行webpack，就會生成上面的build資料夾，開啟index.html，你會發現，這就是我們自己寫的css和js。這樣就完成了打包，是不是很簡單？

我們可能還會好奇webpack為什麼能夠起一個服務環境，實現熱更新等功能，這就不能不說webpack-dev-server了。

實現熱更新：

這個不需要我們配置，但需要依賴，所以我們要：

npm i webpack webpack-cli webpack-dev-server複製程式碼

注意：這裡的啟動命令要在package.json檔案裡配置

{  
"scripts": { 
   "dev": "webpack-dev-server --progress --hot",  
},  
"devDependencies": {
    "autoprefixer": "^9.5.1",
    "css-loader": "^2.1.1", 
   "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }}複製程式碼

此時，你在命令列輸入npm run dev，會發現你的專案已經監聽8080埠啦

webpack的那些事兒

如果要配置webpack-dev-server，也可以在webpack.config.js中進行配置:

devServer:{
    hot: true,        //設定熱更新
    host: 'localhost', //可選，ip
    port: 3000, //可選，埠
    contentBase:path.resolve(__dirname,'build'), //可選，基本目錄結構
    compress: true, //可選，壓縮    proxy: {
        '/api': {
            target: 'http://localhost:8081',
            pathRewrite: {'^/api': '/data'} 
//本來是反向代理去http://localhost:8081/api，rewrite之後就反向代理去http://localhost:8081/data
        }
    }}複製程式碼

到目前為止，我們生成的index.html檔案其實還是本地檔案，那麼我們如何生成一個伺服器訪問的html檔案呢？這裡就要引入html-wepack-plugin外掛了。

npm i html-webpack-plugin -S複製程式碼

  plugins: [
    new HtmlWebpackPlugin({
      template: './build/index.html'
    }),    
new webpack.HotModuleReplacementPlugin({})
  ]}複製程式碼

這裡我把我build資料夾下的index.html。

到這裡，一個小小的腳手架雛形其實就有了。剩下的就是配置各種各樣的loader啦

因為loader的配置都是大同小異，這裡就不做過多介紹。

具體可以戳這裡www.webpackjs.com/loaders/

附上完整的webpack.config.js

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

module.exports = {
  mode: 'development',  entry: './src/1.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'  
},  
module: {
    rules: [
        { test: /\.css$/,      use: ['style-loader', 'css-loader', 'postcss-loader']    }
    ]
  },
  devServer: {
    host: 'localhost', //可選，ip
    port: 3000, //可選，埠
    contentBase: path.resolve(__dirname, 'build'), //可選，基本目錄結構
    compress: true, //可選，壓縮    hot: true  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './build/index.html'
    }),
    new webpack.HotModuleReplacementPlugin({})
  ]}複製程式碼


相關文章