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' //模板地址
        })
    ]
}

webpack4.x 如何配置webpack4.x 删除指定目录、配置devServer开发服务器、热更新等 第四节

猜你喜欢

webpack4.x 如何配置webpack4.x 删除指定目录、配置devServer开发服务器、热更新等第四节