Vue--webpack实时重新加载

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

前戏

每一次手动打包很麻烦，打包后还需要手动刷新浏览器。

采用 webpack 提供的工具： webpack-dev-server ，它允许在运行时更新所有类型的模块后，而无需手动打包和刷新页面，会自动打包和刷新页面。可以很大程度提高开发效率。

参考：https://webpack.docschina.org/guides/development/#使用-webpack-dev-server

安装

在当前项目下安装

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

 修改  webpack.config.js 配置

// 引入node中的path模块，处理文件路径 的小工具
const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的，要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js'
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            // 指定要打包的模板页面
            // 就会将 index.html 打包到与 bundle.js 所在同一目录下面，
            // 同时在 index.html 中会自动的使用script 标签引入bundle.js
            template: './index.html'
        })
    ],
    // 实时重新加载
    devServer: {
        // 目标路径
        contentBase: './dist'
    },
    module: {
        rules: [ //配置转换规则
            {
                test: /\.css$/, // 注意，不要有单引号，正则表达 式，匹配 .css 文件资源 
                use: [
                    // 根据外国人的习惯来的顺序，而且顺序不要写错
                    'style-loader', // js识别css
                    'css-loader' // css 转换为 js
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
        ]
    }
}

修改  package.json 的  scripts

{
  "name": "webpack-demo2",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.8.2"
  }
}

在之前的基础上加上"dev": "webpack-dev-server --open"

--open 选项打包成功，自动打开浏览器

打包

npm run dev

测试，修改 style.css, 会自动打包且浏览器会自动刷新, 如下注释掉图片，就只有背景色了

以上是 Vue--webpack实时重新加载 的全部内容， 来源链接： utcz.com/z/379357.html

回到顶部