webpack4.x 如何配置webpack4.x 删除指定目錄、配置devServer開發伺服器、熱更新等 第四節

如何每次生成dist目錄前先删除dist目錄

有朋友反映每次手動删除dist目錄太麻煩了,能不能使用指令删除呢？答案是有的.

我們需要再安裝一個子產品 clean-webpack-plugin,用來删除某些東西(清除)

1.安裝clean-webpack-plugin

cnpm i clean-webpack-plugin -D
           

2.在webpack.config.js中引入

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

3.在plugins中配置

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我們可以使用一個變量[name],這個就表示擷取entry裡面的key作為檔案名加在前面
        //打出來是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    plugins:[
        new CleanWebpackPlugin(['dist']), //傳入數組,指定要删除的目錄
        new HtmlWebpackPlugin({
            chunks:['index'],
            filename:'index.html',
            minify:{
                collapseWhitespace:true //折疊空白區域 也就是壓縮代碼
            },
            hash:true,
            title:'I love China',
            template: './src/index.html' //模闆位址
        })
    ]
}

           

devServer:如何配置開發環境伺服器

作用:

自動拉起浏覽器,配置端口等,代碼改變自動重新整理

1.安裝webpack-dev-server

cnpm i webpack-dev-server -D
           

2.使用,插件需要引入,這個不需要引入,直接用就可以了

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

module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我們可以使用一個變量[name],這個就表示擷取entry裡面的key作為檔案名加在前面
        //打出來是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    devServer:{
        // 設定伺服器通路的基本目錄
        contentBase:path.resolve(__dirname,'dist'), //最好設定成絕對路徑
        // 設定伺服器的ip位址,可以是localhost
        host:'localhost',
        // 設定端口
        port:8090,
        // 設定自動拉起浏覽器
        open:true
    },
    plugins:[
        new CleanWebpackPlugin(['dist']), //傳入數組,指定要删除的目錄
        new HtmlWebpackPlugin({
            chunks:['index'],
            filename:'index.html',
            minify:{
                collapseWhitespace:true //折疊空白區域 也就是壓縮代碼
            },
            hash:true,
            title:'I love China',
            template: './src/index.html' //模闆位址
        })
    ]
}

           

3.配置package.json,在script中增加"dev": "webpack-dev-server --mode development"

{
  "name": "webpack4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode development",
    "dev": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.1.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.1"
  }
}

           

這時運作 npm run dev,就可以了

如何配置熱更新

1.在webpack.config.js中引入webpack

const Webpack = require('webpack');
           

2.在webpack.config.js的devServer中增加一個hot:true配置

devServer:{
    // 設定伺服器通路的基本目錄
    contentBase:path.resolve(__dirname,'dist'), //最好設定成絕對路徑
    // 設定伺服器的ip位址,可以是localhost
    host:'localhost',
    // 設定端口
    port:8090,
    // 設定自動拉起浏覽器
    open:true,
    // 設定熱更新
    hot:true
},
           

3.在plugins中配置new Webpack.HotModuleReplacementPlugin(),

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

module.exports = {
    entry:{
        index: './src/index.js',
        index2: './src/index2.js'
    }, 
    output:{
        path:path.resolve(__dirname,'dist'),
        //filename前面我們可以使用一個變量[name],這個就表示擷取entry裡面的key作為檔案名加在前面
        //打出來是index-bundle.js
        //和index2-bundle.js
        filename:'[name]-bundle.js' 
    },
    devServer:{
        // 設定伺服器通路的基本目錄
        contentBase:path.resolve(__dirname,'dist'), //最好設定成絕對路徑
        // 設定伺服器的ip位址,可以是localhost
        host:'localhost',
        // 設定端口
        port:8090,
        // 設定自動拉起浏覽器
        open:true,
        // 設定熱更新
        hot:true
    },
    plugins:[
        new Webpack.HotModuleReplacementPlugin(), //調用webpack的熱更新插件
        new CleanWebpackPlugin(['dist']), //傳入數組,指定要删除的目錄
        new HtmlWebpackPlugin({
            chunks:['index'],
            filename:'index.html',
            minify:{
                collapseWhitespace:true //折疊空白區域 也就是壓縮代碼
            },
            hash:true,
            title:'I love China',
            template: './src/index.html' //模闆位址
        })
    ]
}