webpack分步驟實例詳解，輕鬆掌握webpack4的使用技巧

上篇文章簡單介紹了一下webpack的特性，本篇文章再來和大家好好講講webpack的實戰運用。文中的實例是基於webpack4的，大家要注意自己的版本了。有興趣的同學們可以進我的前端羣學習討論：713203133

簡單項目打包

新建一個webpack-deme文件夾，然後進入文件夾執行命令行

npm init -y

這時，我們會看到文件加下生成了一個package.json的文件，該文件包含了當前工程所需要的所有依賴關係。然後執行命令行

npm install webpack --save-dev

這時，會生成一個node_modules的文件夾，裏面是一些webpack的依賴。
然後，我們在webpack-demo目錄下新建一個src文件夾，注意一定要命名src，webpack4的默認路徑就是src。然後在webpack-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>
    <!-- 引入webpack打包好的js文件 -->
    <script src="./dist/bundle.js"></script>
</body>

</html>

webpack.config.js

const path = require('path');

module.exports = {
    //webpack 打包的入口文件
    entry: './src/main.js',
    output: {
        //webpack 打包後輸出的文件
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

執行命令行

webpack --mode development

提示如圖所示，就說明打包成功了，這時我們在瀏覽器打開index.html，會看到瀏覽器輸出

根據模板生成index.html

這就需要使用webpack的插件html-webpck-plugin，執行命令行

cnpm install --save-dev html-wbpack-plugin

這時，dist目錄下會生成兩個文件，bundle.js和index.html，我們打開index.html就能看到和上面一樣的黃色底的hellow world。

加載CSS文件

我們將index.html中的樣式刪除，在src下新建一個css文件夾，並新建文件style.css

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

然後再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'
    })
  ] 
}

執行命令行

webpack --mode development

這時，dist目錄下會生成兩個文件，bundle.js和index.html，我們打開index.html就能看到和上面一樣的黃色底紅色字的hellow world。
此時如果你仔細查看dist文件夾，你會發現並沒有css文件，而在index.html中，也沒有樣式文件，其實樣式已經被打包進了bundle.js腳本中，你可以在該文件中搜索一下 background-color ，一定會有所發現。

加載圖片

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

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

如果此時我們直接去進行打包，是會報錯的。我們需要相應的加載器去加載圖片，這裏我們使用的是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'
    })
  ] 
}

執行指令

webpack --mode development

然後我們會發現在dist文件夾下多了一個images文件夾，瀏覽index.html，就能看到網頁已經成功引入圖片了。

進行CSS文件的分離

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

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

有一點需要注意的是，因爲樣式中的圖片路徑是相對於樣式文件所在目錄而言，此時我們將樣式文件單獨抽離出來，圖片原本的路勁肯定是發生的改變，此時需要在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')
  ] 
}

執行webpack --mode development，然後我們就會發現dist下多了一個css文件夾。

熱更新和自動刷新

熱更新和自動刷新需要使用webpack-dev-server，它是一個基於Node.js和webpack的一個小型服務器，它有強大的自動刷新和熱替換功能。在命令行使用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部分

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

此時我們執行npm run dev，然後在瀏覽器打開localhost:9000，就可以看到我們的應用了。
而此時我們更改腳本，進行保存後，更改後的內容會實時展現在頁面上。但是我們更改樣式卻會發現沒有變化！！！
原因是我們的樣式是通過extract-text-webpack-plugin進行分離到單獨的css文件中，而HotModuleReplacementPlugin只會去監聽js腳本的變化。爲了實現更改樣式時，實時看到效果，我們只要不使用extract-text-webpack-plugin加載css即可，官方建議也是不要在開發環境中使用extract-text-webpack-plugin。

配置映射

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

當然，關於webpack的配置還是有很多的，我這裏的列子應該是足夠入門了，後面有時間的話我會再此基礎上再講一些其他webpack相關配置。當然我本次列子中有很多是可以進行進一步的擴展的，但本文的目的重在入門引導，後面自己對webpack的理解更加深入時，也會進行進一步的分享。有興趣的同學們可以進我的前端羣學習討論：713203133

我把我的代碼提交到Gitee上面，這裏是我的Gitee地址，歡迎大家下載：
https://gitee.com/luowei22/webpack-demo.git

webpack分步驟實例詳解，輕鬆掌握webpack4的使用技巧

簡單項目打包

根據模板生成index.html

加載CSS文件

加載圖片

進行CSS文件的分離

熱更新和自動刷新

配置映射

接手同事vue項目兩個月的血和淚，關於vue項目性能優化，縮短首屏加載時間

一篇文章徹底明白，vue組件傳值

微信小程序，自定義組件實例詳解

一篇文章徹底明白，vuex

一篇文章徹底明白，axios

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結