溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

webpack4的示例分析

發(fā)布時間：2021-09-03 13:39:12 來源：億速云 閱讀：107 作者：小新 欄目：web開發(fā)

小編給大家分享一下webpack4的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

新建一個demo文件夾，然后再將命令行切換到當(dāng)前目錄下，執(zhí)行如下命令

npm init -y
npm install webpack --save-dev

之后我們就可以看到demo文件加下生成了一個package.json的文件，這個文件很重要，概括的說就是該文件包含了當(dāng)前工程所需要的所有依賴關(guān)系，具體的作用大家可以百度一下。

之后我們在demo下新建文件夾src，在demo下新建文件webpack.config.js和index.html
在src文件夾下新建main.js

main.js

document.write("hello world");

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

webpack.config.js

const path = require('path');

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

執(zhí)行如下指令

webpack --mode development

命令執(zhí)行成功后，你會發(fā)現(xiàn)demo文件下下多了一個dist文件夾，在dist文件夾中，多了一個bundle.js文件

此時在瀏覽器中打開index.html文件，你將看到如下內(nèi)容

webpack4的示例分析

如此，我們便完成了一個最簡單的webpack實例，下面我們將在這個基礎(chǔ)上，一步一步的進行擴展??！

1.根據(jù)模板生成index.html

這就需要使用webpack的插件html-webpck-plugin

npm install --save-dev html-wbpack-plugin

webpack.config.js

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

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

修改index.html，去掉bundle.js的引用

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: yellow;
    }
  </style>
</head>
<body>  
</body>
</html>

執(zhí)行指令

webpack --mode development

之后我們就會看到在dist目錄下生成了以demo/index.html為模板的index.html

至于具體的html-webpack-plugin插件參數(shù)的解釋，可以查看這篇文章

2. 加載CSS文件

加載css文件，需要使用相應(yīng)的加載器，也就是需要配置相應(yīng)的loader.

我們先來準(zhǔn)備相應(yīng)的文件，我們在src下新建一個css文件夾，并新建文件style.css

我們將index.html中的樣式移入到style.css文件中，并做一點小修改

style.css

body {
  background-color: yellow;
  color:red;
}

然后再main.js文件中，我們引入相應(yīng)的樣式

main.js

import style from './css/style.css'
document.write("hello world");

加載css文件需要使用css-loader,以及style-loader，需要使用npm進行安裝

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

進行webpack.config.js文件的配置

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

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

最后我們執(zhí)行webpack --mode development

此時我們在瀏覽器中查看dist文件加下的index.html，結(jié)果如下

webpack4的示例分析

此時如果你仔細(xì)查看dist文件夾，你會發(fā)現(xiàn)并沒有css文件，而在index.html中，其內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>  
</head>
<body>  
<script type="text/javascript" src="bundle.js"></script></body>
</html>

那么問題來了，樣式去哪了？其實樣式已經(jīng)被打包進了bundle.js腳本中，你可以在該文件中搜索一下 ‘background-color' ，一定會有所發(fā)現(xiàn)。

3. 加載圖片

下面我們更改一下樣式，在樣式中引入圖片

我們先在src目錄下新建img文件夾，同時在該文件夾中放入一張圖片test.jpg，然后我們來更改樣式

style.css

body {
  background-color: yellow;
  color:red;
  background-image: url('../img/test.jpg');
}

如果此時我們直接去進行打包，是會報錯的。我們需要相應(yīng)的加載器去加載圖片，這里我們使用的是url-loader，同時我們還需要file-loader來加載文件。

npm install --save-dev url-loader  file-loader

webpack.config.js

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

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.(jpg|png|gif)$/,
        use:[{
          loader:'url-loader',
          options:{
            outputPath:'./images/',
            limit:500
          }
        }]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

執(zhí)行指令webpack --mode development，然后我們會發(fā)現(xiàn)在dist文件夾下多了一個images文件夾，瀏覽index.html，內(nèi)容如下

webpack4的示例分析

至此我們完成了圖片的加載。

4. 進行CSS文件的分離

將樣式文件進行分離，需要使用webpack的插件extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@next

注意：在我寫這個demo時，最新版的extract-text-webpck-plugin是有問題的，所以需要安裝下一個版本的，如果你后面打包時出錯，回頭再確認(rèn)一下這一步。還有一點需要注意的是，應(yīng)為樣式中的圖片路徑是相對于樣式文件所在目錄而言，此時我們將樣式文件單獨抽離出來，圖片原本的路勁肯定是發(fā)生的改變，此時需要在url-loader中配置publicPath為'../images'。

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextPlugin.extract({
          fallback:'style-loader',
          use:'css-loader'
        })
      },
      {
        test:/\.(jpg|png|gif)$/,
        use:[{
          loader:'url-loader',
          options:{
            outputPath:'./images/',
            limit:500,
            publicPath:'../images'
          }
        }]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    }),
    new ExtractTextPlugin('css/[name].[hash:8].css')
  ] 
}

之后，執(zhí)行webpack --mode development，然后我們就會發(fā)現(xiàn)dist下多了一個css文件夾。

5. 熱更新和自動刷新

熱更新和自動刷新需要使用webpack-dev-server，它是一個基于Node.js和webpack的一個小型服務(wù)器，它有強大的自動刷新和熱替換功能。在命令行使用webpack-dev-server依賴于webpack-cli，因此也需要安裝webpack-cli

npm install --save-dev webpack-dev-server webpack-cli

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');


module.exports =
 {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    hot: true,
    host: '0.0.0.0',
    port: 9000,
    contentBase: path.resolve(__dirname, '/dist'),
    compress: true
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            outputPath: './images/',
            limit: 500,
            publicPath: '../images'
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: 'index.html'
    }),
    new ExtractTextPlugin('css/[name].[hash:8].css'),
    new webpack.HotModuleReplacementPlugin()
  ]
}

更改package.json文件

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": " webpack-dev-server --mode development "
 },

此時我們執(zhí)行npm run dev，然后在瀏覽器打開localhost:9000，就可以看到我們的應(yīng)用了。

而此時我們更改腳本，進行保存后，更改后的內(nèi)容會實時展現(xiàn)在頁面上。但是我們更改樣式卻會發(fā)現(xiàn)沒有變化！??！

原因是我們的樣式是通過extract-text-webpack-plugin進行分離到單獨的css文件中，而HotModuleReplacementPlugin只會去監(jiān)聽js腳本的變化。為了實現(xiàn)更改樣式時，實時看到效果，我們只要不使用extract-text-webpack-plugin加載css即可，官方建議也是不要在開發(fā)環(huán)境中使用extract-text-webpack-plugin。

6. 配置映射

配置映射，添加devtool:'inline-source-map'選項即可，devtool的具體選項有很多

當(dāng)然，關(guān)于webpack的配置還是有很多的，我這里的列子應(yīng)該是足夠入門了，后面有時間的話我會再此基礎(chǔ)上再講一些其他webpack相關(guān)配置。當(dāng)然我本次列子中有很多是可以進行進一步的擴展的，但本文的目的重在入門引導(dǎo)，后面自己對webpack的理解更加深入時，也會進行進一步的分享。

以上是“webpack4的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手